In the previous tutorial we explained how to link multiple charts using SciChart.js. In this tutorial, we are going to show you how to add a Vertical Chart.
Adding a Chart
First let's create a simple Line Chart. In this example we generate a data set for sine wave and add SciChartSurface with two NumericAxis and FastLineRenderableSeries to produce the Line Chart.
This gives us this chart:
Making the Chart Vertical
In fact, just setting xAxis.axisAlignment to EAxisAlignment.Left or Right and yAxis.axisAlignment to EAxisAlignment.Top or Bottom makes the chart vertical.
Moreover if the axes orientation needs to be inverted there is axis.flippedCoordinates property on AxisCore class.
In order to make the chart interactive we add chart modifiers such as ZoomPanModifier, ZoomExtentsModifier, MouseWheelZoomModifier and RolloverModifier.
This gives us the Vertical Chart:
Further Reading
Here is related documentation for further reading: