Curved Connection
The curved renderer creates beautiful, flowing tree visualizations that are perfect for when you want to add visual elegance to your hierarchical data. Curved connections use smooth, flowing lines to connect parent and child nodes, creating an organic and visually appealing appearance.
Curved Connection Example
Create organic tree layouts with smooth, flowing curved 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 CurvedConnectionTree() {
return (
<TreeChart
data={treeData}
type="curved"
nodeConfig={{
color: "#08CB00"
}}
edgeConfig={{
curveRadius: 25
}}
width={600}
height={400}
/>
);
}
export default CurvedConnectionTree;Expected Output
Features
- Smooth, curved lines - Creates elegant flowing connections between nodes
- Organic appearance - Perfect for natural hierarchies and mind maps
- Visual appeal - More aesthetically pleasing than straight lines
- Better readability - Easier to follow complex tree structures
When to Use
Curved connections work best for mind maps and brainstorming diagrams, creative and artistic presentations, and family trees and genealogy charts. They're particularly effective for natural hierarchies like biological classifications and any scenario where you want a softer, more organic visual style.
Configuration Options
The curved renderer supports all standard TreeChart configuration options. For detailed customization:
- Node Configuration - See Node Styling and Node Types
- Edge Configuration - See Edges Customization