Vertically Stacked Axis Layout

The Stacked Axis feature in SciChart allows you to specify the layout of the axis panel. Normally when you have multiple YAxis, they are stacked horizontally. However, you can switch this to stack vertically. Custom and complex layouts are possible allowing for all kinds of chart scenarios.

Above: The Vertically Stacked Axis example in SciChart.js demo.

Create a Vertically Stacked Axis Chart

Step 1: Create a multiple Y-Axis Chart

Typically if you create a chart with several Y-Axis, they are stacked on the left or right of the chart.

The following code with 8 YAxis on the left results in this output:

Javascript
json-builder

// Create an XAxis on the bottom
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
  axisTitle: "X Axis",
  axisTitleStyle: {fontSize: 13},
  backgroundColor: "#50C7E022",
  axisBorder: {color: "#50C7E0", borderTop: 1}
}));

// Create several YAxis on the left
// Creating a NumericAxis as a YAxis on the left
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis0",
  axisTitle: "Y Axis 0",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis1",
  axisTitle: "Y Axis 1",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis2",
  axisTitle: "Y Axis 2",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis3",
  axisTitle: "Y Axis 3",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis4",
  axisTitle: "Y Axis 4",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis5",
  axisTitle: "Y Axis 5",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis6",
  axisTitle: "Y Axis 6",
  axisAlignment: EAxisAlignment.Left
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "YAxis7",
  axisTitle: "Y Axis 7",
  axisAlignment: EAxisAlignment.Left
}));

// To make it clearer what's happening, colour the axis backgrounds & borders
const axisColors = ["#50C7E0", "#EC0F6C", "#30BC9A", "#F48420", "#364BA0", "#882B91", "#67BDAF", "#C52E60"];
sciChartSurface.yAxes.asArray().forEach((yAxis, index) => {
  yAxis.backgroundColor = axisColors[index] + "22";
  yAxis.axisBorder = {color: axisColors[index], borderRight: 1};
  yAxis.axisTitleStyle.fontSize = 13;
});

// Let's add some series to the chart to show how they also behave with axis
const getOptions = (index) => {
  const xValues = Array.from(Array(50).keys());
  const yValues = xValues.map(x => Math.sin(x * 0.4 + index));

  return {
    yAxisId: `YAxis${index}`,
    stroke: axisColors[index] + "77",
    strokeThickness: 2,
    dataSeries: new XyDataSeries(wasmContext, {xValues, yValues })
  };
};

sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(0)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(1)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(2)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(3)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(4)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(5)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(6)}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(7)}));

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
  surface: { theme: { type: EThemeProviderType.Dark } },
  xAxes: {
    type: EAxisType.NumericAxis,
    options: {
      axisTitle: "X Axis",
      axisTitleStyle: { fontSize: 13 },
      backgroundColor: "#50C7E022",
      axisBorder: { color: "#50C7E0", borderTop: 1 }
    }
  },
  yAxes: [
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    },
    {
      type: EAxisType.NumericAxis,
      options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
    }
  ],
});

const axisColors = ["#50C7E0", "#EC0F6C", "#30BC9A", "#F48420", "#364BA0", "#882B91", "#67BDAF", "#C52E60"];
sciChartSurface.yAxes.asArray().forEach((yAxis, index) => {
  yAxis.backgroundColor = axisColors[index] + "22";
  yAxis.axisBorder = { color: axisColors[index], borderRight: 1 };
  yAxis.axisTitleStyle.fontSize = 13;
});

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

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

async function verticallyStackedAxis(divElementId) {
  const {
    SciChartSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    EAxisAlignment,
    FastLineRenderableSeries,
    XyDataSeries
  } = SciChart;

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

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

  // #region ExampleA
  // Create an XAxis on the bottom
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis",
    axisTitleStyle: {fontSize: 13},
    backgroundColor: "#50C7E022",
    axisBorder: {color: "#50C7E0", borderTop: 1}
  }));

  // Create several YAxis on the left
  // Creating a NumericAxis as a YAxis on the left
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis0",
    axisTitle: "Y Axis 0",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis1",
    axisTitle: "Y Axis 1",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis2",
    axisTitle: "Y Axis 2",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis3",
    axisTitle: "Y Axis 3",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis4",
    axisTitle: "Y Axis 4",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis5",
    axisTitle: "Y Axis 5",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis6",
    axisTitle: "Y Axis 6",
    axisAlignment: EAxisAlignment.Left
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "YAxis7",
    axisTitle: "Y Axis 7",
    axisAlignment: EAxisAlignment.Left
  }));

  // To make it clearer what's happening, colour the axis backgrounds & borders
  const axisColors = ["#50C7E0", "#EC0F6C", "#30BC9A", "#F48420", "#364BA0", "#882B91", "#67BDAF", "#C52E60"];
  sciChartSurface.yAxes.asArray().forEach((yAxis, index) => {
    yAxis.backgroundColor = axisColors[index] + "22";
    yAxis.axisBorder = {color: axisColors[index], borderRight: 1};
    yAxis.axisTitleStyle.fontSize = 13;
  });

  // Let's add some series to the chart to show how they also behave with axis
  const getOptions = (index) => {
    const xValues = Array.from(Array(50).keys());
    const yValues = xValues.map(x => Math.sin(x * 0.4 + index));

    return {
      yAxisId: `YAxis${index}`,
      stroke: axisColors[index] + "77",
      strokeThickness: 2,
      dataSeries: new XyDataSeries(wasmContext, {xValues, yValues })
    };
  };

  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(0)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(1)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(2)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(3)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(4)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(5)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(6)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(7)}));
  // #endregion
};

verticallyStackedAxis("scichart-root");





async function builderExample(divElementId) {
  const {
    chartBuilder,
    EThemeProviderType,
    EAxisType,
    EAxisAlignment
  } = SciChart;

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

  // #region ExampleB
  const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    surface: { theme: { type: EThemeProviderType.Dark } },
    xAxes: {
      type: EAxisType.NumericAxis,
      options: {
        axisTitle: "X Axis",
        axisTitleStyle: { fontSize: 13 },
        backgroundColor: "#50C7E022",
        axisBorder: { color: "#50C7E0", borderTop: 1 }
      }
    },
    yAxes: [
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      },
      {
        type: EAxisType.NumericAxis,
        options: { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }
      }
    ],
  });

  const axisColors = ["#50C7E0", "#EC0F6C", "#30BC9A", "#F48420", "#364BA0", "#882B91", "#67BDAF", "#C52E60"];
  sciChartSurface.yAxes.asArray().forEach((yAxis, index) => {
    yAxis.backgroundColor = axisColors[index] + "22";
    yAxis.axisBorder = { color: axisColors[index], borderRight: 1 };
    yAxis.axisTitleStyle.fontSize = 13;
  });
  // #endregion
};



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

Step 2: Apply the Layout Strategy

To change the behaviour of axis stacking you need to set the appropriate layoutStrategy property on the SciChartSurface.LayoutManager with the stacked version.

SciChart provides the following Outer Axes Layout Strategies:

Modify the code above to set this property on the SciChartSurface.LayoutManager:

Now the layout is completely changed.

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

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

async function verticallyStackedAxis(divElementId) {
  const {
    SciChartSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    EAxisAlignment,
    LeftAlignedOuterVerticallyStackedAxisLayoutStrategy,
    FastLineRenderableSeries,
    XyDataSeries
  } = SciChart;

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

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

  // #region ExampleA
  sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy
      = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();
  // #endregion

  // Create an XAxis on the bottom
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis",
    axisTitleStyle: { fontSize: 13 },
    backgroundColor: "#50C7E022",
    axisBorder: { color: "#50C7E0", borderTop: 1 }
  }));

  // Create several YAxis on the left
  // Creating a NumericAxis as a YAxis on the left
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis0", axisTitle: "Y Axis 0", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis1", axisTitle: "Y Axis 1", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis2", axisTitle: "Y Axis 2", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis3", axisTitle: "Y Axis 3", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis4", axisTitle: "Y Axis 4", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis5", axisTitle: "Y Axis 5", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis6", axisTitle: "Y Axis 6", axisAlignment: EAxisAlignment.Left }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { id: "YAxis7", axisTitle: "Y Axis 7", axisAlignment: EAxisAlignment.Left }));

  // To make it clearer what's happening, colour the axis backgrounds & borders
  const axisColors = ["#50C7E0", "#EC0F6C", "#30BC9A", "#F48420", "#364BA0", "#882B91", "#67BDAF", "#C52E60"];
  sciChartSurface.yAxes.asArray().forEach((yAxis, index) => {
    yAxis.backgroundColor = axisColors[index] + "22";
    yAxis.axisBorder = { color: axisColors[index], borderRight: 1 };
    yAxis.axisTitleStyle.fontSize = 13;
  });

  // Let's add some series to the chart to show how they also behave with axis
  const getOptions = (index) => {
    const xValues = Array.from(Array(50).keys());
    const yValues = xValues.map(x => Math.sin(x * 0.4 + index));

    return {
      yAxisId: `YAxis${index}`,
      stroke: axisColors[index],
      strokeThickness: 2,
      dataSeries: new XyDataSeries(wasmContext, {xValues, yValues })
    };
  };

  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(0)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(1)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(2)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(3)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(4)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(5)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(6)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(7)}));
};

verticallyStackedAxis("scichart-root");

Make sure to assign Layout Strategy to an appropriate property on the Layout Manager accordingly to Axis Alignment.

Experimenting with different Layout Strategies

The following vertically stacked layout strategies are available and may be applied to the following properties on SciChartSurface.LayoutManager:

Layout Strategy	Use with	Apply to LayoutManager prop	Behaviour
LeftAlignedOuterAxisLayoutStrategy	Y Axis	leftInnerAxisLayoutStrategy, leftOuterAxisLayoutStrategy	Default behaviour
RightAlignedOuterAxisLayoutStrategy	Y Axis	rightInnerAxisLayoutStrategy, rightOuterAxisLayoutStrategy	Default behaviour
LeftAlignedOuterVerticallyStackedAxisLayoutStrategy	Y Axis	rightOuterAxisLayoutStrategy	Vertical stacking behaviour
RightAlignedOuterVerticallyStackedAxisLayoutStrategy	Y Axis	leftOuterAxisLayoutStrategy	Vertical stacking behaviour

Try experimenting with the Codepen above to see how each of the strategies behave.
Note that a Right*LayoutStrategy wil require Axis.axisAlignment = EAxisAlignment.Right and vice versa.

Customising Axis Size when Vertically Stacked

The Axis.stackedAxisLength property allows you to customize the size of a Vertically Stacked Axis in SciChart.js. This property may be an absolute number, e.g. 50 pixels, or a percentage e.g. "30%". When left undefined, default equal spacing will be used.

Find an updated example below:

Javascript

sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy
    = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

// ...

// Create several YAxis on the left using stackedAxisLength
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "Y0",
  axisAlignment: EAxisAlignment.Left,
  axisTitle: "50% Size",
  stackedAxisLength: "50%" // Occupy 50% of available viewport size
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "Y1",
  axisAlignment: EAxisAlignment.Left,
  axisTitle: "Default"
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "Y2",
  axisAlignment: EAxisAlignment.Left,
  axisTitle: "Default"
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
  id: "Y3",
  axisAlignment: EAxisAlignment.Left,
  axisTitle: "200 pixels",
  stackedAxisLength: 200 // Occupy exactly 200 pixels
}));

The layout and sizes of the Vertically Stacked Axis now updates as follows:

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

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

async function verticallyStackedAxis(divElementId) {
  const {
    SciChartSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    EAxisAlignment,
    LeftAlignedOuterVerticallyStackedAxisLayoutStrategy,
    FastLineRenderableSeries,
    XyDataSeries
  } = SciChart;

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

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

  // Create an XAxis on the bottom
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "X Axis",
    axisTitleStyle: { fontSize: 13 },
    backgroundColor: "#50C7E022",
    axisBorder: { color: "#50C7E0", borderTop: 1 }
  }));

  // #region ExampleA
  sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy
      = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

  // ...

  // Create several YAxis on the left using stackedAxisLength
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "Y0",
    axisAlignment: EAxisAlignment.Left,
    axisTitle: "50% Size",
    stackedAxisLength: "50%" // Occupy 50% of available viewport size
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "Y1",
    axisAlignment: EAxisAlignment.Left,
    axisTitle: "Default"
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "Y2",
    axisAlignment: EAxisAlignment.Left,
    axisTitle: "Default"
  }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    id: "Y3",
    axisAlignment: EAxisAlignment.Left,
    axisTitle: "200 pixels",
    stackedAxisLength: 200 // Occupy exactly 200 pixels
  }));
  // #endregion

  // To make it clearer what's happening, colour the axis backgrounds & borders
  const axisColors = ["#50C7E0", "#EC0F6C", "#30BC9A", "#F48420" ];
  sciChartSurface.yAxes.asArray().forEach((yAxis, index) => {
    yAxis.backgroundColor = axisColors[index] + "22";
    yAxis.axisBorder = { color: axisColors[index], borderRight: 1 };
    yAxis.axisTitleStyle.fontSize = yAxis.stackedAxisLength === undefined ? 13 : 15;
    yAxis.axisTitleStyle.color = yAxis.stackedAxisLength === undefined ? "#FFFFFF77" : "#FFFFFF";
  });

  // Let's add some series to the chart to show how they also behave with axis
  const getOptions = (index) => {
    const xValues = Array.from(Array(50).keys());
    const yValues = xValues.map(x => Math.sin(x * 0.4 + index));

    return {
      yAxisId: `Y${index}`,
      stroke: axisColors[index],
      strokeThickness: 2,
      dataSeries: new XyDataSeries(wasmContext, { xValues, yValues })
    };
  };

  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(0)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(1)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(2)}));
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {...getOptions(3)}));
};

verticallyStackedAxis("scichart-root");