SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Alignment - Create a Vertical Chart
Axis Alignment - Create a Vertical Chart

It is possible to create Vertical (Rotated) Charts with SciChart. To achieve this, simply set axis.axisAlignment to Left or Right for X Axis and Top or Bottom for Y Axis. And that's it - SciChart takes care of the rest:

Vertical Charts
Copy Code
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext);
xAxis.axisAlignment = EAxisAlignment.Bottom; // Set XAxis alignment to bottom or top
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext); // Set YAxis alignment to left or right
yAxis.axisAlignment = EAxisAlignment.Left;
sciChartSurface.yAxes.add(yAxis);

This results in the following output, where the XAxis is on the left, the YAxis is on the top. The chart series is rotated automatically and now draws top to bottom, rather than left to right.

Rotating a JavaScript Chart vertically

Flipping the Axis when Horizontal or Vertical.

An Axis may be flipped when horizontal or vertical (coordinates drawn in opposite directions) by setting the AxisCore.flippedCoordinates property.

For example, taking the code sample above, and setting xAxis.flippedCoordinates = true, we get the following result. Notice the XAxis is now drawn in reverse and the series is now drawn from bottom to top..

Flipping or reversing Axis coordinates (mirroring) in JavaScript Charts

 

 

See Also