Right Angle Connections
Right angle connections provide the most structured and professional approach to tree visualization, making them ideal for corporate and formal applications. Right angle connections create structured, professional layouts using clean 90-degree angles to connect parent and child nodes.
Right Angle Connection Example
Create structured layouts with 90-degree angle connections
import { TreeChart } from 'treecharts-react';
// Define your tree data
const treeData = {
value: "A",
child: [
{
value: "B",
child: [
{ value: "D", child: [] },
{ value: "E", child: [] }
]
},
{
value: "C",
child: [
{ value: "F", child: [] }
]
}
]
};
function RightAngleTree() {
return (
<TreeChart
data={treeData}
type="right-angle"
nodeConfig={{
color: "#08CB00"
}}
width={600}
height={400}
/>
);
}
export default RightAngleTree;Expected Output
Features
- Professional appearance - Clean, structured look perfect for business use
- Clear hierarchical structure - Easy to follow parent-child relationships
- Grid-like alignment - Nodes align perfectly in rows and columns
- Optimal for organizational charts - Industry standard for corporate hierarchies
When to Use
Right angle connections are perfect for organizational charts and corporate hierarchies, flowcharts and process diagrams, and system architecture diagrams. They excel in structured data visualization, formal presentations and reports, and any scenario where you need clear visual separation between levels.
Configuration Options
The right angle renderer supports all standard TreeChart configuration options. For detailed customization:
- Node Configuration - See Node Styling and Node Types
- Edge Configuration - See Edges Customization