Treemap Chart

Treemap charts display hierarchical data as nested rectangles where the area of each rectangle is proportional to its value. They are excellent for visualizing the relative sizes of data categories within a whole.

Interface

TreemapChart Props

interface TreemapChartProps {
  // Required properties
  data: TreemapData;

  // Optional properties
  custom?: Partial<TreemapCustom>;
  title?: string;
  colors?: string[];       // Custom color palette
}

Data Structure

type TreemapNode = {
  label: string;       // Node label
  value: number;       // Node value (determines area)
  color?: string;      // Optional custom color
};

type TreemapData = {
  nodes: TreemapNode[];   // Array of data nodes
  title?: string;         // Chart title
};

Basic Usage

import Widget from '@meursyphus/flitter-react';
import { TreemapChart } from '@meursyphus/headless-chart';

const data = {
  nodes: [
    { label: 'Asia', value: 4641 },
    { label: 'Africa', value: 1340 },
    { label: 'Europe', value: 747 },
    { label: 'N. America', value: 579 },
    { label: 'S. America', value: 422 },
    { label: 'Oceania', value: 43 }
  ],
  title: 'World Population by Continent'
};

function BasicTreemapChart() {
  return (
    <Widget
      width="600px"
      height="400px"
      widget={TreemapChart({ data })}
    />
  );
}

Chart Components

Treemap Chart consists of the following hierarchical structure:

TreemapChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Legend (legend)
    │   └── LegendItem (legend items)
    └── Treemap (treemap area)
        └── Node (individual rectangle)

Customizable Elements

You can customize the following components through the custom prop:

Real-World Usage Examples

1. Custom Node with Labels

const labeledTreemap = TreemapChart({
  data,
  custom: {
    node: ({ label, value, color, ratio, width, height }) => {
      return Container({
        decoration: new BoxDecoration({
          color: color,
          border: Border.all({ color: '#ffffff', width: 2 })
        }),
        child: Center({
          child: Column({
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(label, {
                style: new TextStyle({ fontSize: 14, fontWeight: 'bold', color: '#ffffff' })
              }),
              Text(`${value}`, {
                style: new TextStyle({ fontSize: 12, color: 'rgba(255,255,255,0.8)' })
              })
            ]
          })
        })
      });
    }
  }
});

2. Custom Color Scheme

const coloredTreemap = TreemapChart({
  data,
  colors: ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']
});

Next Steps

• For more examples, check out the demo page
• Customize node rendering with labels and percentage displays
• Use custom color schemes to highlight specific categories