SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Stacked Column Series Type
The Stacked Column Series Type

Stacked Column Charts can be created by a combination of the StackedColumnRenderableSeries and StackedColumnCollection type. StackedColumnRenderableSeries share many properties with the added feature that columns automatically stack vertically or side by side.

The JavaScript Stacked Column Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com

Fast, Realtime JavaScript Stacked Column Charts by SciChart.js

Create a Stacked Column Series

To create a JavaScript Stacked Column Chart, use the following code:

Example Title
Copy Code
// Create a SciChartSurface
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
// Create XAxis, YAxis
const xAxis = new NumericAxis(wasmContext);
xAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
yAxis.growBy = new NumberRange(0, 0.1);
sciChartSurface.yAxes.add(yAxis);
// Create a selection of DataSeries
const dataSeries1 = new XyDataSeries(wasmContext, { xValues, yValues: porkData, dataSeriesName: "Pork" });
const dataSeries2 = new XyDataSeries(wasmContext, { xValues, yValues: vealData, dataSeriesName: "Veal" });
const dataSeries3 = new XyDataSeries(wasmContext, { xValues, yValues: tomatoesData, dataSeriesName: "Tomato" });
const dataSeries4 = new XyDataSeries(wasmContext, { xValues, yValues: cucumberData, dataSeriesName: "Cucumber" });
const dataSeries5 = new XyDataSeries(wasmContext, { xValues, yValues: pepperData, dataSeriesName: "Pepper" });
// Create 5 RenderableSeries - for each part of the stacked column
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#226Fb7";
rendSeries1.stroke = "black";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = dataSeries1;
rendSeries1.rolloverModifierProps.markerColor = "#19548b";
rendSeries1.rolloverModifierProps.tooltipColor = "#226Fb7";
rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries1.stackedGroupId = "Meat";
const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
rendSeries2.fill = "#ff9a2e";
rendSeries2.dataSeries = dataSeries2;
rendSeries2.rolloverModifierProps.markerColor = "#db8428";
rendSeries2.rolloverModifierProps.tooltipColor = "#ff9a2e";
rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
rendSeries2.stackedGroupId = "Meat";
const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
rendSeries3.fill = "#dc443f";
rendSeries3.dataSeries = dataSeries3;
rendSeries3.rolloverModifierProps.markerColor = "#b83735";
rendSeries3.rolloverModifierProps.tooltipColor = "#dc443f";
rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries3.stackedGroupId = "Vegetables";
const rendSeries4 = new StackedColumnRenderableSeries(wasmContext);
rendSeries4.fill = "#aad34f";
rendSeries4.dataSeries = dataSeries4;
rendSeries4.rolloverModifierProps.markerColor = "#87a73e";
rendSeries4.rolloverModifierProps.tooltipColor = "#aad34f";
rendSeries4.rolloverModifierProps.tooltipTextColor = "#000";
rendSeries4.stackedGroupId = "Vegetables";
const rendSeries5 = new StackedColumnRenderableSeries(wasmContext);
rendSeries5.fill = "#8562b4";
rendSeries5.dataSeries = dataSeries5;
rendSeries5.rolloverModifierProps.markerColor = "#715195";
rendSeries5.rolloverModifierProps.tooltipColor = "#8562b4";
rendSeries5.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries5.stackedGroupId = "Vegetables";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.8;
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3, rendSeries4, rendSeries5);
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);

Above:

How the Stacking and Grouping Works for Column Series

StackedColumnRenderableSeries have a property stackedGroupId which defines how columns are grouped and stacked. When two StackedColumnRenderableSerieshave a stackedGroupId set the grouping behaves differently. Some examples below to help visualize how this feature works:

Two Columns, same (or Unset) stackedGroupId (the default)

By default, the stackedGroupId is undefined. When this is unset, or, when set to the same value, columns stack vertically.

Above: Orange, Blue have same (or unset) stackedGroupId

Two Columns, different stackedGroupId

When the stackedGroupId is different on two columns, then the columns are grouped. This allows you to have multiple stacked groups.

Above: Orange, Blue have different stackedGroupId

Three Columns (2 with one stackedGroupId, 1 with another stackedGroupId)

To demonstrate the purpose of stackedGroupId, below we have set one column to one stackedGroupId, and two other columns to another stackedGroupId. This creates two stacked groups, one with Orange/Red series (which have the same stackedGroupId) and another with the blue series.

Above: Orange, Red = same stackedGroupId, Blue = different stackedGroupId  

Creating 100% Stacked Column Charts

SciChart.js also supports a 100% Stacked Column chart, which can be enabled by setting a single flag: StackedColumnCollection.isOneHundredPercent.

100% Stacked Column Series
Copy Code
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.8;
verticallyStackedColumnCollection.isOneHundredPercent = true;
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);

 Setting this flag results in the following output.

Above: a  JavaScript 100% Stacked Column chart when StackedGroupId is the same for all series, and StackedColumnCollection.isOneHundredPercent is true