Stacked Bar Chart

Stacked bar charts display multiple data series stacked on top of each other within each bar. They are ideal for showing both the total value and the composition of each category simultaneously.

Interface

StackedBarChart Props

interface StackedBarChartProps {
  // Required properties
  data: StackedBarChartData;

  // Optional properties
  custom?: Partial<StackedBarChartCustom>;
  title?: string;
  direction?: 'vertical' | 'horizontal';
  getScale?: (data: StackedBarChartData) => StackedBarChartScale;
}

Data Structure

type StackedBarChartData = {
  labels: string[];                                  // Category labels
  datasets: { legend: string; values: number[] }[];  // Data series
};

type StackedBarChartScale = {
  min: number;     // Minimum value
  max: number;     // Maximum value
  step: number;    // Step interval
};

Basic Usage

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

const data = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [
    { legend: 'Product A', values: [120, 150, 180, 200] },
    { legend: 'Product B', values: [80, 100, 90, 110] },
    { legend: 'Product C', values: [60, 70, 85, 95] }
  ]
};

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

Chart Components

Stacked Bar Chart consists of the following hierarchical structure:

StackedBarChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Legend (legend items)
    └── Plot (plot area)
        ├── XAxis (X-axis)
        ├── YAxis (Y-axis)
        ├── Grid (grid lines)
        └── Series (data series)
            └── BarGroup (grouped stacked bars)
                └── Bar (individual bar segment)

Customizable Elements

You can customize the following components through the custom prop:

Component	Args	Description
`layout`	`{ title, legends, plot }`	Overall chart layout
`plot`	`{ xAxis, yAxis, series, grid }`	Plot area
`series`	`{ barGroups }`	Data series container
`barGroup`	`{ bars, index, label, values }`	Grouped stacked bars
`bar`	`{ value, label, legend, index }`	Individual bar segment
`legend`	`{ name, index }`	Legend item
`title`	`{ name }`	Chart title
`dataLabel`	`{ value, label, legend }`	Data label
`xAxis`	`{ line, labels, tick }`	X-axis structure
`yAxis`	`{ line, labels, tick }`	Y-axis structure
`xAxisLabel`	`{ name, index }`	X-axis label
`yAxisLabel`	`{ name, index }`	Y-axis label
`xAxisLine`	-	X-axis line
`yAxisLine`	-	Y-axis line
`xAxisTick`	-	X-axis tick mark
`yAxisTick`	-	Y-axis tick mark
`grid`	`{ xLine, yLine }`	Grid container
`gridXLine`	-	Vertical grid line
`gridYLine`	-	Horizontal grid line

Real-World Usage Examples

1. Horizontal Stacked Bar

const horizontalStacked = StackedBarChart({
  data,
  direction: 'horizontal',
  custom: {
    bar: ({ value, label, legend, index }) => {
      // Custom horizontal bar rendering
    }
  }
});

2. Custom Bar Colors

const coloredBars = StackedBarChart({
  data,
  custom: {
    bar: ({ value, label, legend, index }, config) => {
      const colors = { 'Product A': '#3b82f6', 'Product B': '#ef4444', 'Product C': '#10b981' };
      return Container({
        decoration: new BoxDecoration({
          color: colors[legend]
        })
      });
    }
  }
});

Next Steps

For more examples, check out the demo page
Try switching between vertical and horizontal directions
Add data labels to show individual segment values