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

Above: The JavaScript Stacked Column Chart example from the SciChart.js Demo.

Create a Stacked Column Series

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

Javascript
json-builder

// Demonstrates how to create a Column chart with SciChart.js
const {
  SciChartSurface,
  NumericAxis,
  StackedColumnRenderableSeries,
  StackedColumnCollection,
  XyDataSeries,
  SciChartJsNavyTheme
} = SciChart;

// or, for npm, import { SciChartSurface, ... } from "scichart"

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

// Data for the example
const xValues = [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003];
const yValues1 = [10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11];
const yValues2 = [12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10];
const yValues3 = [7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22];
const yValues4 = [16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17];
const yValues5 = [7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16];

// Create some RenderableSeries - for each part of the stacked column
// Notice the stackedGroupId. This defines if series are stacked (same), or grouped side by side (different)
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
  fill: "#882B91",
  stroke:"#E4F5FC",
  strokeThickness: 2,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
});

const rendSeries2 = new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
  fill: "#EC0F6C",
  stroke: "#E4F5FC",
  strokeThickness: 2,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
});

const rendSeries3 = new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
  fill: "#F48420",
  stroke: "#E4F5FC",
  strokeThickness: 2,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
});

const rendSeries4 = new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues4, dataSeriesName: "UK" }),
  fill: "#50C7E0",
  stroke: "#E4F5FC",
  strokeThickness: 2,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId",
});

const rendSeries5 = new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues5, dataSeriesName: "Latam" }),
  fill: "#30BC9A",
  stroke: "#E4F5FC",
  strokeThickness: 2,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
});

// To add the series to the chart, put them in a StackedColumnCollection
const stackedColumnCollection = new StackedColumnCollection(wasmContext);
stackedColumnCollection.dataPointWidth = 0.6;
stackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3, rendSeries4, rendSeries5);

// Add the Stacked Column collection to the chart
sciChartSurface.renderableSeries.add(stackedColumnCollection);

// Demonstrates how to create a Column chart with SciChart.js using the Builder API
const {
  chartBuilder,
  ESeriesType,
  EThemeProviderType
} = SciChart;

// or, for npm, import { chartBuilder, ... } from "scichart"

// Data for the example
const xValues = [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003];
const yValues1 = [10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11];
const yValues2 = [12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10];
const yValues3 = [7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22];
const yValues4 = [16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17];
const yValues5 = [7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16];

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
  surface: { theme: { type: EThemeProviderType.Dark } },
  series: [
    // Group StackedColumn into one StackedColumnCollection and pass into the series object
    {
      type: ESeriesType.StackedColumnCollection,
      series: [
        {
          type: ESeriesType.StackedColumnSeries,
          options: { stackedGroupId: "StackedGroupId", fill: "#882B91", stroke: "#E4F5FC" },
          xyData: { xValues, yValues: yValues1 }
        },
        {
          type: ESeriesType.StackedColumnSeries,
          options: { stackedGroupId: "StackedGroupId", fill: "#EC0F6C", stroke: "#E4F5FC" },
          xyData: { xValues, yValues: yValues2 }
        },
        {
          type: ESeriesType.StackedColumnSeries,
          options: { stackedGroupId: "StackedGroupId", fill: "#F48420", stroke: "#E4F5FC" },
          xyData: { xValues, yValues: yValues3 }
        },
        {
          type: ESeriesType.StackedColumnSeries,
          options: { stackedGroupId: "StackedGroupId", fill: "#50C7E0", stroke: "#E4F5FC" },
          xyData: { xValues, yValues: yValues4 }
        },
        {
          type: ESeriesType.StackedColumnSeries,
          options: { stackedGroupId: "StackedGroupId", fill: "#30BC9A", stroke: "#E4F5FC" },
          xyData: { xValues, yValues: yValues5 }
        }
      ]
    },
  ]
});

This results in the following output:

<div id="scichart-root" ></div>

body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }

async function simpleStackedColumnChart(divElementId) {
  // #region ExampleA
  // Demonstrates how to create a Column chart with SciChart.js
  const {
    SciChartSurface,
    NumericAxis,
    StackedColumnRenderableSeries,
    StackedColumnCollection,
    XyDataSeries,
    SciChartJsNavyTheme
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"

  const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  // Data for the example
  const xValues = [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003];
  const yValues1 = [10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11];
  const yValues2 = [12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10];
  const yValues3 = [7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22];
  const yValues4 = [16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17];
  const yValues5 = [7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16];

  // Create some RenderableSeries - for each part of the stacked column
  // Notice the stackedGroupId. This defines if series are stacked (same), or grouped side by side (different)
  const rendSeries1 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
    fill: "#882B91",
    stroke:"#E4F5FC",
    strokeThickness: 2,
    opacity: 0.8,
    stackedGroupId: "StackedGroupId"
  });

  const rendSeries2 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
    fill: "#EC0F6C",
    stroke: "#E4F5FC",
    strokeThickness: 2,
    opacity: 0.8,
    stackedGroupId: "StackedGroupId"
  });

  const rendSeries3 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
    fill: "#F48420",
    stroke: "#E4F5FC",
    strokeThickness: 2,
    opacity: 0.8,
    stackedGroupId: "StackedGroupId"
  });

  const rendSeries4 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues4, dataSeriesName: "UK" }),
    fill: "#50C7E0",
    stroke: "#E4F5FC",
    strokeThickness: 2,
    opacity: 0.8,
    stackedGroupId: "StackedGroupId",
  });

  const rendSeries5 = new StackedColumnRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues5, dataSeriesName: "Latam" }),
    fill: "#30BC9A",
    stroke: "#E4F5FC",
    strokeThickness: 2,
    opacity: 0.8,
    stackedGroupId: "StackedGroupId"
  });

  // To add the series to the chart, put them in a StackedColumnCollection
  const stackedColumnCollection = new StackedColumnCollection(wasmContext);
  stackedColumnCollection.dataPointWidth = 0.6;
  stackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3, rendSeries4, rendSeries5);

  // Add the Stacked Column collection to the chart
  sciChartSurface.renderableSeries.add(stackedColumnCollection);
  // #endregion

  // Optional: add zooming, panning for the example
  const { MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier } = SciChart;
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier, new ZoomExtentsModifier());
};

simpleStackedColumnChart("scichart-root");





async function builderExample(divElementId) {
  // #region ExampleB
  // Demonstrates how to create a Column chart with SciChart.js using the Builder API
  const {
    chartBuilder,
    ESeriesType,
    EThemeProviderType
  } = SciChart;

  // or, for npm, import { chartBuilder, ... } from "scichart"

  // Data for the example
  const xValues = [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003];
  const yValues1 = [10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11];
  const yValues2 = [12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10];
  const yValues3 = [7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22];
  const yValues4 = [16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17];
  const yValues5 = [7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16];

  const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    surface: { theme: { type: EThemeProviderType.Dark } },
    series: [
      // Group StackedColumn into one StackedColumnCollection and pass into the series object
      {
        type: ESeriesType.StackedColumnCollection,
        series: [
          {
            type: ESeriesType.StackedColumnSeries,
            options: { stackedGroupId: "StackedGroupId", fill: "#882B91", stroke: "#E4F5FC" },
            xyData: { xValues, yValues: yValues1 }
          },
          {
            type: ESeriesType.StackedColumnSeries,
            options: { stackedGroupId: "StackedGroupId", fill: "#EC0F6C", stroke: "#E4F5FC" },
            xyData: { xValues, yValues: yValues2 }
          },
          {
            type: ESeriesType.StackedColumnSeries,
            options: { stackedGroupId: "StackedGroupId", fill: "#F48420", stroke: "#E4F5FC" },
            xyData: { xValues, yValues: yValues3 }
          },
          {
            type: ESeriesType.StackedColumnSeries,
            options: { stackedGroupId: "StackedGroupId", fill: "#50C7E0", stroke: "#E4F5FC" },
            xyData: { xValues, yValues: yValues4 }
          },
          {
            type: ESeriesType.StackedColumnSeries,
            options: { stackedGroupId: "StackedGroupId", fill: "#30BC9A", stroke: "#E4F5FC" },
            xyData: { xValues, yValues: yValues5 }
          }
        ]
      },
    ]
  });
  // #endregion
};



// Uncomment this to use the builder example
//builderExample("scichart-root");

Above:

We created 5 StackedColumnRenderableSeries and added them to a StackedColumnCollection
The StackedColumnCollection itself is added to sciChartSurface.renderableSeries collection, not the individual column series.

How the Stacking and Grouping Works for Column Series

StackedColumnRenderableSeries have a property stackedGroupId which defines how columns are grouped and stacked.

When two StackedColumnRenderableSeries have a stackedGroupId set the grouping behaves differently.

Here's an example below to visualize how this stackedGroupId. Code samples can be found in the following sections.

<div class="container">
    <div id="scichart0" class="box"></div>
    <div id="scichart1" class="box right"></div>
    <div id="scichart2" class="box bottom"></div>
    <div id="scichart3" class="box right bottom"></div>
</div>

body { margin:0; padding:0; }
.container {
    width: 100%;
    height: 100vh;
    background-color:#fff;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-row: auto auto;
    .box{
        background-color:#333;
        margin: 20px 0px 0px 20px;
        border: 1px solid red;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:40px;
        font-family:sans-serif;
    }
    .right {
        margin-right: 20px;
    }
    .bottom {
        margin-bottom: 20px;
    }
}

async function stackedColumnOptions() {
  // Demonstrates how to create a Column chart with SciChart.js
  const {
    SciChartSurface,
    NumericAxis,
    StackedColumnRenderableSeries,
    StackedColumnCollection,
    XyDataSeries,
    SciChartJsNavyTheme,
    MouseWheelZoomModifier,
    ZoomPanModifier,
    ZoomExtentsModifier,
    TextAnnotation,
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint,
    ECoordinateMode,
    NumberRange
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"

  // Data for the example
  const xValues = [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003];
  const yValues1 = [10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11];
  const yValues2 = [12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10];
  const yValues3 = [7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22];

  // Helper to add a chart title via annotations. Yes we are working on improving chart titles!
  const addChartTitle = (sciChartSurface, title) => {
    sciChartSurface.annotations.add(new TextAnnotation({
      x1: 0.5,
      y1: 0,
      xCoordinateMode: ECoordinateMode.Relative,
      yCoordinateMode: ECoordinateMode.Relative,
      horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
      verticalAnchorPoint: EVerticalAnchorPoint.Top,
      text: title,
      fontFamily: "Arial",
      fontSize: 16,
      textColor: "#EEE"
    }));
  };

  const createStackedExample = async (divElementId, title) => {
    // #region ExampleA
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
      theme: new SciChartJsNavyTheme()
    });
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

    const stackedCollection = new StackedColumnCollection(wasmContext);

    // Using the same stackedGroupId causes stacking (one above another)
    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
      fill: "#882B91",
      stroke:"#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
      fill: "#EC0F6C",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
      fill: "#F48420",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId"
    }));

    sciChartSurface.renderableSeries.add(stackedCollection);
    // #endregion

    // Optional: add zooming, panning for the example
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier, new ZoomExtentsModifier());
    addChartTitle(sciChartSurface, title);
  };

  const createGroupedExample = async (divElementId, title) => {
    // #region ExampleB
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
      theme: new SciChartJsNavyTheme()
    });
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

    const stackedCollection = new StackedColumnCollection(wasmContext);

    // Using a different stackedGroupId causes grouping (side-by-side)
    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
      fill: "#882B91",
      stroke:"#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId-First"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
      fill: "#EC0F6C",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId-Second"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
      fill: "#F48420",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId-Third"
    }));

    sciChartSurface.renderableSeries.add(stackedCollection);
    // #endregion

    // Optional: add zooming, panning for the example
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier, new ZoomExtentsModifier());
    addChartTitle(sciChartSurface, title);
  };

  const createMixedExample = async (divElementId, title) => {
    // #region ExampleC
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
      theme: new SciChartJsNavyTheme()
    });
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

    const stackedCollection = new StackedColumnCollection(wasmContext);

    // Using a mixture of stackedGroupId allows mixed stacked/grouped behaviour
    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
      fill: "#882B91",
      stroke:"#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId-First"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
      fill: "#EC0F6C",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId-First"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
      fill: "#F48420",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId-Second"
    }));

    sciChartSurface.renderableSeries.add(stackedCollection);
    // #endregion

    // Optional: add zooming, panning for the example
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier, new ZoomExtentsModifier());
    addChartTitle(sciChartSurface, title);
  };

  const create100PercentExample = async (divElementId, title) => {
    // #region ExampleD
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
      theme: new SciChartJsNavyTheme()
    });
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

    const stackedCollection = new StackedColumnCollection(wasmContext, {
      // Simply set isOneHundredPercent to enable 100% stacking
      isOneHundredPercent: true
    });

    // Using the same stackedGroupId causes stacking (one above another)
    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
      fill: "#882B91",
      stroke:"#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
      fill: "#EC0F6C",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId"
    }));

    stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
      fill: "#F48420",
      stroke: "#E4F5FC",
      strokeThickness: 1,
      opacity: 0.8,
      stackedGroupId: "StackedGroupId"
    }));

    sciChartSurface.renderableSeries.add(stackedCollection);
    // #endregion

    // Optional: add zooming, panning for the example
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier, new ZoomExtentsModifier());
    addChartTitle(sciChartSurface, title);
  };


  createStackedExample("scichart0", "A: Stacked Column Mode");
  createGroupedExample("scichart1", "B: Grouped Column Mode");
  createMixedExample("scichart2", "C: Mixed Mode");
  create100PercentExample("scichart3", "D: 100% Stacked Mode");
};

stackedColumnOptions();

A: Stacked Column Mode

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

Javascript

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

const stackedCollection = new StackedColumnCollection(wasmContext);

// Using the same stackedGroupId causes stacking (one above another)
stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
  fill: "#882B91",
  stroke:"#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
  fill: "#EC0F6C",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
  fill: "#F48420",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId"
}));

sciChartSurface.renderableSeries.add(stackedCollection);

B: Grouped (Side by Side) Mode

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

Javascript

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

const stackedCollection = new StackedColumnCollection(wasmContext);

// Using a different stackedGroupId causes grouping (side-by-side)
stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
  fill: "#882B91",
  stroke:"#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-First"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
  fill: "#EC0F6C",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-Second"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
  fill: "#F48420",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-Third"
}));

sciChartSurface.renderableSeries.add(stackedCollection);

C: Mixed (Stacked & Grouped) Mode

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.

Javascript

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

const stackedCollection = new StackedColumnCollection(wasmContext);

// Using a mixture of stackedGroupId allows mixed stacked/grouped behaviour
stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
  fill: "#882B91",
  stroke:"#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-First"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
  fill: "#EC0F6C",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-First"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
  fill: "#F48420",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-Second"
}));

sciChartSurface.renderableSeries.add(stackedCollection);

D: 100% Stacked Column Chart Mode

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

Javascript

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1 )}));

const stackedCollection = new StackedColumnCollection(wasmContext);

// Using a mixture of stackedGroupId allows mixed stacked/grouped behaviour
stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues1, dataSeriesName: "EU" }),
  fill: "#882B91",
  stroke:"#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-First"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues2, dataSeriesName: "Asia" }),
  fill: "#EC0F6C",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-First"
}));

stackedCollection.add(new StackedColumnRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: yValues3, dataSeriesName: "USA" }),
  fill: "#F48420",
  stroke: "#E4F5FC",
  strokeThickness: 1,
  opacity: 0.8,
  stackedGroupId: "StackedGroupId-Second"
}));

sciChartSurface.renderableSeries.add(stackedCollection);

Above: a JavaScript 100% Stacked Column chart where StackedColumnCollection.isOneHundredPercent is true