Direct Connection
Direct connections provide the foundation for clean, professional tree visualizations that focus on content over visual effects. Direct connections use clean, straight lines to connect parent and child nodes, providing the most minimal and straightforward tree visualization.
Direct Connection Example
Create a tree chart with clean, straight-line 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 DirectConnectionTree() {
return (
<TreeChart
data={treeData}
type="direct"
nodeConfig={{
color: "#08CB00"
}}
width={600}
height={400}
/>
);
}
export default DirectConnectionTree;Expected Output
Features
- Clean, minimal appearance - Straight lines create a clutter-free visualization
- Best performance - Fastest rendering with minimal computational overhead
- Clear hierarchy - Direct visual path from parent to child
- Universal compatibility - Works well in all contexts and screen sizes
When to Use
Direct connections are ideal for simple organizational charts, basic hierarchical data visualization, and situations when performance is critical. They work particularly well for clean professional presentations, mobile applications where better touch interaction is needed, and high-density data where clarity is important.
Configuration Options
The direct renderer supports all standard TreeChart configuration options. For detailed customization:
- Node Configuration - See Node Styling and Node Types
- Edge Configuration - See Edges Customization