Getting Started

Learn how to install and use TreeCharts in your project

TreeCharts is a powerful, flexible library for creating interactive tree visualizations. It supports React and vanilla JavaScript with a highly customizable and lightweight architecture.

📋 Quick Links

🎯 Live Examples: https://treecharts.netlify.app/examples
📦 NPM Packages: treecharts, treecharts-react
🐛 Issues & Support: GitHub Issues

Installation

Choose the package that matches your setup:

Installation Commands

Install TreeCharts for your preferred framework

jsx

npm install treecharts-react
# or
yarn add treecharts-react

Quick Start

Once installed, you can create your first tree chart in just a few lines:

Quick Start Example

Create your first tree chart with minimal setup

jsx

import { TreeChart } from 'treecharts-react';

const treeData = {
  value: "Root Node",
  child: [
    { value: "Child 1", child: [] },
    { value: "Child 2", child: [] }
  ]
};

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

Expected Output

TypeScript Support

All packages include TypeScript definitions out of the box.

What's Next?

Core Concepts - Learn the fundamentals
Tree Options - Explore different layouts and connections
Node Types - Customize how nodes are displayed
Edge Customization - Control the appearance of connections
Tree Alignment - Adjust the positioning of nodes and branches

Core Concepts