treechartsv0.4.1

Core Concepts

Understanding the fundamentals of TreeCharts

Core Concepts

TreeCharts takes your nested tree data and generates lightweight, highly customizable tree charts. It works with a simple nested data structure and provides flexible options for rendering and layout.

Tree Data Structure

TreeCharts uses a nested object structure where each node can have children. The correct format uses value for the node text and child for the children array:

{
  "value": "Root Node",
  "child": [
    {
      "value": "Child 1",
      "child": [
        { "value": "Grandchild 1", "child": [] },
        { "value": "Grandchild 2", "child": [] }
      ]
    },
    {
      "value": "Child 2",
      "child": []
    }
  ]
}

TreeCharts now works with this specific format, but we're working on supporting more common tree data structures in upcoming versions!

Basic Usage

Learn how to create your first tree chart with TreeCharts using the same data structure shown above.

Basic Tree Example

Converting the tree data structure into a visual chart

jsx
import { TreeChart } from 'treecharts-react';

// Using the same tree data from above
const treeData = {
  value: "Root Node",
  child: [
    {
      value: "Child 1",
      child: [
        { value: "Grandchild 1", child: [] },
        { value: "Grandchild 2", child: [] }
      ]
    },
    {
      value: "Child 2",
      child: []
    }
  ]
};

function BasicTree() {
  return (
    <TreeChart
      data={treeData}
      type="right-angle"
      nodeConfig={{
        color: "#90EE90",
        width: 120,
      }}
      width={600}
      height={400}
    />
  );
}

export default BasicTree;

Expected Output

Output for Basic Tree Example

Next Steps

Now that you understand the basics, to personalize your chart based on your needs for further customization, please check out the following concepts and features:

Previous
Getting Started
Next
Tree Options