Skip to main content
Kinetix Charts provides a stack() utility function to easily create stacked bar charts. Stacking is useful for showing how different components contribute to a total value across categories.

​
How stacking works

The stack() function takes an array of data series and transforms them by adding a y0 property to each data point. This y0 property represents the baseline (bottom) position of each bar segment, allowing bars to stack on top of each other.
1

Prepare your data

Create separate arrays for each series you want to stack:
const series1 = [{ x: 0, y: 20 }, { x: 1, y: 30 }, { x: 2, y: 25 }];
const series2 = [{ x: 0, y: 15 }, { x: 1, y: 20 }, { x: 2, y: 18 }];
const series3 = [{ x: 0, y: 10 }, { x: 1, y: 15 }, { x: 2, y: 12 }];
2

Apply the stack utility

Import and use the stack() function to transform your data:
import { stack } from 'kinetix-charts';

const stackedData = stack([series1, series2, series3]);
The function adds a y0 property to each point, representing where each bar segment starts.
3

Create bar series

Create a BarSeries for each stacked dataset:
const colors = ['#6366f1', '#22c55e', '#f59e0b'];
const names = ['Product A', 'Product B', 'Product C'];

stackedData.forEach((data, i) => {
  const bar = new BarSeries(container, 1);
  bar.setScales(chart.xScale, chart.yScale);
  bar.color = colors[i];
  bar.name = names[i];
  bar.setData(data);
  chart.addSeries(bar);
});

​
Complete example

Here’s a complete stacked bar chart showing product sales across three months: 
import { Chart, BarSeries, stack } from 'kinetix-charts';

const chart = new Chart(container);
chart.series = [];

// Raw data for each series
const series1 = [{ x: 0, y: 20 }, { x: 1, y: 30 }, { x: 2, y: 25 }];
const series2 = [{ x: 0, y: 15 }, { x: 1, y: 20 }, { x: 2, y: 18 }];
const series3 = [{ x: 0, y: 10 }, { x: 1, y: 15 }, { x: 2, y: 12 }];

// Stack the data (adds y0 property for baseline)
const stackedData = stack([series1, series2, series3]);

const colors = ['#6366f1', '#22c55e', '#f59e0b'];
const names = ['Product A', 'Product B', 'Product C'];

stackedData.forEach((data, i) => {
  const bar = new BarSeries(container, 1);
  bar.setScales(chart.xScale, chart.yScale);
  bar.color = colors[i];
  bar.name = names[i];
  bar.setData(data);
  chart.addSeries(bar);
});
The stack() function is located in src/utils/stack.ts:3 and automatically calculates the y0 baseline for each data point by summing all previous series values at that x-coordinate.

​
How the y0 property works

The stack() utility transforms your data by adding a y0 property to each point:
  • y0: The starting position (baseline) of the bar segment
  • y: The ending position (top) of the bar segment
  • Height: The visual height is y - y0
For the first series, y0 is always 0. For subsequent series, y0 equals the cumulative sum of all previous series values at that x-coordinate. 
[
  { x: 0, y: 20 },
  { x: 1, y: 30 },
  { x: 2, y: 25 }
]

​
Multiple series stacking

You can stack as many series as needed. The stack() function handles any number of input arrays: 
const stackedData = stack([
  salesData,
  costsData,
  profitData,
  taxData,
  otherData
]);
All input series must have the same length and matching x-coordinates. The function assumes all datasets align at the same x values (see src/utils/stack.ts:13).

​
Categorical stacking

Stacking works with both numeric and categorical x-axes: 
const series1 = [
  { x: 'Q1', y: 100 },
  { x: 'Q2', y: 120 },
  { x: 'Q3', y: 110 },
  { x: 'Q4', y: 130 }
];

const series2 = [
  { x: 'Q1', y: 80 },
  { x: 'Q2', y: 90 },
  { x: 'Q3', y: 85 },
  { x: 'Q4', y: 95 }
];

const stackedData = stack([series1, series2]);
The legend automatically displays all stacked series with their colors, making it easy to identify each component in the stack.

Build docs developers (and LLMs) love

Get started for freeTalk to us