SciChart.js - High Performance Realtime Javascript Charts Examples Suite

Vertical Charts

Demonstrates how to create a rotated JavaScript Chart with vertical X-Axis using SciChart.js, High Performance JavaScript Charts

Source Code

View on GitHub
import * as React from "react";
import { NumberRange } from "scichart/Core/NumberRange";
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { EAxisAlignment } from "scichart/types/AxisAlignment";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { RolloverModifier } from "scichart/Charting/ChartModifiers/RolloverModifier";

const divElementId2 = "chart2";

const X_TITLE = "X Axis";
const Y_TITLE = "Y Axis";

// Chart data for y=sin(x*0.1)
const xValues: number[] = [];
const yValues: number[] = [];
for (let i = 0; i <= 100; i++) {
    const x = 0.1 * i;
    xValues.push(x);
    yValues.push(Math.sin(x));
}

const drawExample = async () => {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId2);

    // Setting an XAxis on the Left or Right
    // and YAxis on the Top or Bottom
    // causes the chart and series to be rotated vertically
    const xAxis = new NumericAxis(wasmContext);
    xAxis.axisAlignment = EAxisAlignment.Left;
    xAxis.axisTitle = X_TITLE;
    xAxis.growBy = new NumberRange(0.1, 0.1);
    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext);
    yAxis.axisAlignment = EAxisAlignment.Top;
    yAxis.axisTitle = Y_TITLE;
    yAxis.growBy = new NumberRange(0.1, 0.1);
    sciChartSurface.yAxes.add(yAxis);

    // An axis may be optionally flipped using flippedCoordinates property
    xAxis.flippedCoordinates = true;

    // Add a series with sinewave. This will be drawn vertically.
    sciChartSurface.renderableSeries.add(
        new FastLineRenderableSeries(wasmContext, {
            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
            stroke: "#ff6600",
        })
    );

    // Add some interactivity modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier());
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
    sciChartSurface.chartModifiers.add(new RolloverModifier({ isVerticalChart: true }));

    sciChartSurface.zoomExtents();

    return { wasmContext, sciChartSurface };
};

export default function VerticalCharts() {
    const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();

    React.useEffect(() => {
        (async () => {
            const res = await drawExample();
            setSciChartSurface(res.sciChartSurface);
        })();
        // Delete sciChartSurface on unmount component to prevent memory leak
        return () => sciChartSurface?.delete();
    }, []);

    return <div id={divElementId2} style={{ maxWidth: 900 }} />;
}

// JavaScript Chart Examples

SciChart.js ships with ~40 JavaScript Chart Examples which you can browse, play with, view the source code and see related documentation. All of this is possible with the SciChart.js Examples Suite, which ships as part of the SciChart.js SDK

Description

Demonstrates a vertical chart with XAxis on the Left and YAxis on the Top. SciChart.js supports unlimited X and Y axis and allows placement of any axis on the Left, Right, Top, Bottom of the chart.

Tips!

The vertical chart, popular in Oil & Gas, Geo-surveying, is created by setting xAxis.axisAlignment = Left, and yAxis.axisAlignment = top.

Try dragging an axis or the chart to zoom and pan around. Double clicking the chart resets the zoom!

Documentation Links

See Also

SciChart.js: Fast, Realtime, High Performance JavaScript Charts | JavaScript Chart Examples | Sitemap