Tree Alignment
Control the positioning and flow direction of your tree layouts
TreeCharts provides powerful alignment options to control both the horizontal positioning of nodes within each level and the vertical flow direction of your entire tree structure.
Left alignment positioning
Combined alignment options
Right alignment positioning
Alignment Options
TreeCharts offers two alignment properties that work together to control your tree layout:
| Property | Values | Default | Description |
|---|---|---|---|
verticalAlign | left, center, right | center | Controls horizontal positioning of nodes within each level |
horizontalAlign | top-to-bottom, bottom-to-top | top-to-bottom | Controls vertical flow direction of the tree |
Note: The property names might seem counterintuitive - verticalAlign controls horizontal positioning because it aligns nodes along the vertical axis, and horizontalAlign controls vertical flow direction.
Alignment Examples
Examples demonstrating different alignment combinations
jsx
import { TreeChart } from 'treecharts-react';
const sampleData = {
value: "Root",
child: [
{
value: "A",
child: [
{ value: "A1", child: [] },
{ value: "A2", child: [] },
],
},
{
value: "B",
child: [{ value: "B1", child: [] }],
},
{
value: "C",
child: [],
},
],
};
function TreeAlignmentExample() {
return (
<TreeChart
data={sampleData}
type="direct"
verticalAlign="right"
horizontalAlign="bottom-to-top"
width={600}
height={400}
/>
);
}
export default TreeAlignmentExample;Expected Output
