Regular Nodes

Regular nodes are the fundamental building blocks of TreeCharts, offering a variety of geometric shapes to display text content. They provide clean, professional visualizations perfect for organizational charts, decision trees, mind maps, and hierarchical data structures.

Regular nodes offer extensive customization options. Here are some examples of what you can achieve:

Colors, borders, and shadows

Typography customization

Advanced effects with gradients and shadows

Gradients and advanced effects

Individual node styling for different departments

Per-node styling options

Configuration Options

Regular nodes offer extensive customization through the nodeConfig property. All properties have sensible defaults:

Dimensions and Layout

Property	Type	Default	Description
`type`	`string`	`"rectangle"`	Node shape (rectangle, circle, diamond)
`width`	`number`	`80`	Node width in pixels
`height`	`number`	`40`	Node height in pixels
`padding`	`number`	`5`	Internal text padding

Colors and Appearance

Property	Type	Default	Description
`color`	`string`	`"skyblue"`	Background color (CSS color)
`borderColor`	`string`	`"black"`	Border color (CSS color)
`borderWidth`	`number`	`1`	Border thickness in pixels
`borderRadius`	`number`	`6`	Corner roundness (rectangles only)
`opacity`	`number`	`1`	Node transparency (0-1)

Typography

Property	Type	Default	Description
`fontSize`	`number`	`14`	Text size in pixels
`fontColor`	`string`	`"black"`	Text color (CSS color)
`fontFamily`	`string`	`"Arial, sans-serif"`	Font family

Advanced Effects

Property	Type	Default	Description
`shadow`	`boolean`	`false`	Enable drop shadow
`shadowColor`	`string`	`"rgba(0,0,0,0.3)"`	Shadow color
`shadowOffset`	`{x: number, y: number}`	`{x: 2, y: 2}`	Shadow offset
`gradient`	`boolean`	`false`	Enable gradient fill
`gradientStartColor`	`string`	`""`	Gradient start color
`gradientEndColor`	`string`	`""`	Gradient end color
`customAttributes`	`object`	`{}`	Custom SVG attributes

Individual Node Configuration

One of TreeCharts' most powerful features is the ability to configure individual nodes differently while maintaining a consistent default style for the rest of the tree. This is achieved using the nodeConfig property directly in your tree data.

How It Works

Each node in your tree data can include a nodeConfig property that overrides the default configuration for that specific node. This allows you to:

Highlight important nodes with different colors
Use different shapes for different node types
Create visual hierarchies and categories
Apply special styling to specific branches

Configuration Priority

The configuration follows this priority order:

Individual node config (highest priority)
Global node config (default fallback)
Built-in defaults (lowest priority)

Individual Node Configuration Example

Apply different styling to individual nodes using nodeConfig

jsx

import { TreeChart } from 'treecharts-react';

// Tree data with individual node configurations
const treeData = {
  value: "Root",
  child: [
    {
      value: "Child 1",
      nodeConfig: {
        color: "#FF6B6B",        // Red background
        fontColor: "white",      // White text
        borderColor: "#FF5252",  // Darker red border
      },
      child: []
    },
    {
      value: "Child 2",
      nodeConfig: {
        color: "#FFE66D",        // Yellow background
        fontColor: "#333",       // Dark text
        borderColor: "#FFC107",  // Orange border
      },
      child: []
    }
  ]
};

function IndividualNodeConfigTree() {
  return (
    <TreeChart
      data={treeData}
      nodeConfig={{
        type: "rectangle",
        color: "#E3F2FD",          // Light blue (default)
        borderColor: "#2196F3",     // Blue border (default)
        borderWidth: 2,
        fontSize: 14,
        fontColor: "#1976D2",       // Dark blue text (default)
        width: 120,
        height: 50
      }}
      width={600}
      height={400}
    />
  );
}

export default IndividualNodeConfigTree;

Expected Output

Output for Individual Node Configuration Example

Common Use Cases

Organizational Charts

Use rectangles with professional colors and clear typography for corporate hierarchies.

Decision Trees

Combine rectangles for processes and diamonds for decision points.

Mind Maps

Use circles or rounded rectangles with different colors for various categories.

Process Flows

Use different shapes to represent different types of process steps.

Node Types

Node with Description