The Stacked Mountain Series Type

Stacked Mountain Charts can be created by a combination of the StackedMountainRenderableSeries and StackedMountainCollection types. StackedMountainRenderableSeries share many properties with the added feature that columns automatically stack vertically or side by side.

The JavaScript Stacked Mountain 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 Mountain Charts by SciChart.js

Create a Stacked Mountain Series

To create a JavaScript Stacked Mountain Series, use the following code:

Example Title	Copy Code
// Create a SciChartSurface const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId); // Create an xAxis, yAxis sciChartSurface.xAxes.add(new NumericAxis(wasmContext)); sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {growBy: new NumberRange(0, 0.1)})); // Create 3 DataSeries for our 3 stacked mountains const dataSeries1 = new XyDataSeries(wasmContext, { xValues, yValues: y1Values }); const dataSeries2 = new XyDataSeries(wasmContext, { xValues, yValues: y2Values }); const dataSeries3 = new XyDataSeries(wasmContext, { xValues, yValues: y3Values }); // Create the three Stacked Mountain series const rendSeries1 = new StackedMountainRenderableSeries(wasmContext); rendSeries1.dataSeries = dataSeries1; rendSeries1.fill = "#939899"; rendSeries1.rolloverModifierProps.markerColor = "#7b7e80"; rendSeries1.rolloverModifierProps.tooltipColor = "rgba(147,152,153,0.7)"; rendSeries1.rolloverModifierProps.tooltipTextColor = "#000"; const rendSeries2 = new StackedMountainRenderableSeries(wasmContext); rendSeries2.dataSeries = dataSeries2; rendSeries2.fill = "#66838d"; rendSeries2.rolloverModifierProps.markerColor = "#495d65"; rendSeries2.rolloverModifierProps.tooltipColor = "rgba(102,131,141,0.7)"; rendSeries2.rolloverModifierProps.tooltipTextColor = "#000"; const rendSeries3 = new StackedMountainRenderableSeries(wasmContext); rendSeries3.dataSeries = dataSeries3; rendSeries3.fill = "#368BC1"; rendSeries3.rolloverModifierProps.markerColor = "#2d739e"; rendSeries3.rolloverModifierProps.tooltipColor = "rgba(54,139,193,0.7)"; rendSeries3.rolloverModifierProps.tooltipTextColor = "#000"; // Group these StackedMountain series together in a StackedMountainCollection const verticallyStackedMountainCollection = new StackedMountainCollection(wasmContext); verticallyStackedMountainCollection.add(rendSeries1, rendSeries2, rendSeries3); // Add the StackedMountainCollection to the chart sciChartSurface.renderableSeries.add(verticallyStackedMountainCollection);

Example Title

Copy Code

// Create a SciChartSurface
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
// Create an xAxis, yAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {growBy: new NumberRange(0, 0.1)}));
// Create 3 DataSeries for our 3 stacked mountains
const dataSeries1 = new XyDataSeries(wasmContext, { xValues, yValues: y1Values });
const dataSeries2 = new XyDataSeries(wasmContext, { xValues, yValues: y2Values });
const dataSeries3 = new XyDataSeries(wasmContext, { xValues, yValues: y3Values });
// Create the three Stacked Mountain series
const rendSeries1 = new StackedMountainRenderableSeries(wasmContext);
rendSeries1.dataSeries = dataSeries1;
rendSeries1.fill = "#939899";
rendSeries1.rolloverModifierProps.markerColor = "#7b7e80";
rendSeries1.rolloverModifierProps.tooltipColor = "rgba(147,152,153,0.7)";
rendSeries1.rolloverModifierProps.tooltipTextColor = "#000";
const rendSeries2 = new StackedMountainRenderableSeries(wasmContext);
rendSeries2.dataSeries = dataSeries2;
rendSeries2.fill = "#66838d";
rendSeries2.rolloverModifierProps.markerColor = "#495d65";
rendSeries2.rolloverModifierProps.tooltipColor = "rgba(102,131,141,0.7)";
rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
const rendSeries3 = new StackedMountainRenderableSeries(wasmContext);
rendSeries3.dataSeries = dataSeries3;
rendSeries3.fill = "#368BC1";
rendSeries3.rolloverModifierProps.markerColor = "#2d739e";
rendSeries3.rolloverModifierProps.tooltipColor = "rgba(54,139,193,0.7)";
rendSeries3.rolloverModifierProps.tooltipTextColor = "#000";
// Group these StackedMountain series together in a StackedMountainCollection
const verticallyStackedMountainCollection = new StackedMountainCollection(wasmContext);
verticallyStackedMountainCollection.add(rendSeries1, rendSeries2, rendSeries3);
// Add the StackedMountainCollection to the chart
sciChartSurface.renderableSeries.add(verticallyStackedMountainCollection);

Above:

We created 3 StackedMountainRenderableSeries and added them to a StackedMountainCollection
The StackedMountainCollection itself is added to sciChartSurface.renderableSeries collection, not the individual mountain series.

Creating 100% Stacked Mountain Charts

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

100% Stacked Mountain Series	Copy Code
const stackedMountainCollection = new StackedMountainCollection(wasmContext); stackedMountainCollection.isOneHundredPercent = true; stackedMountainCollection.add(rendSeries1, rendSeries2, rendSeries3);

100% Stacked Mountain Series

Copy Code

const stackedMountainCollection = new StackedMountainCollection(wasmContext);
stackedMountainCollection.isOneHundredPercent = true;
stackedMountainCollection.add(rendSeries1, rendSeries2, rendSeries3);

Setting this flag results in the following output.

Above: a JavaScript 100% Stacked Mountain chart when StackedMountainCollection.isOneHundredPercent is true