SciChart.js - High Performance Realtime Javascript Charts Examples Suite

Multiple X Axes

Demonstrates how to create a JavaScript Chart with multiple X,Y axis using SciChart.js, High Performance JavaScript Charts

Source Code

View on GitHub
import * as React from "react";
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 { ENumericFormat } from "scichart/Charting/Visuals/Axis/LabelProvider/NumericLabelProvider";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { YAxisDragModifier } from "scichart/Charting/ChartModifiers/YAxisDragModifier";
import { XAxisDragModifier } from "scichart/Charting/ChartModifiers/XAxisDragModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";

const divElementId = "chart1";

const drawExample = async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
    const ID_X_AXIS_2 = "xAxis2";
    const ID_Y_AXIS_2 = "yAxis2";

    // FIRST CHART
    const titleStyle1 = {
        color: "#228B22",
        fontSize: 30,
        fontFamily: "Courier New"
    };
    const labelStyle1 = {
        color: "#228B22"
    };
    const setXAxis1 = () => {
        const xAxis = new NumericAxis(wasmContext);
        xAxis.axisAlignment = EAxisAlignment.Bottom;
        xAxis.axisTitle = "X1 Axis";
        xAxis.axisTitleStyle = titleStyle1;
        xAxis.labelStyle = labelStyle1;
        xAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
        sciChartSurface.xAxes.add(xAxis);
    };
    setXAxis1();

    const setYAxis1 = () => {
        const yAxis = new NumericAxis(wasmContext);
        yAxis.axisAlignment = EAxisAlignment.Left;
        yAxis.axisTitle = "Y1 Axis";
        yAxis.axisTitleStyle = titleStyle1;
        yAxis.labelStyle = labelStyle1;
        yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
        sciChartSurface.yAxes.add(yAxis);
    };
    setYAxis1();

    const setSeries1 = () => {
        const lineData = new XyDataSeries(wasmContext);
        const iStep = 20;
        const fAmpltude = 100.0;
        const fFrequency = 1.0;
        for (let i = 0; i < 500 + iStep; i += iStep) {
            lineData.append(i, Math.sin((fFrequency * i * Math.PI) / 180.0) * fAmpltude);
        }
        const lineSeries = new FastLineRenderableSeries(wasmContext, {
            stroke: "#228B22",
            strokeThickness: 3,
            dataSeries: lineData
        });
        sciChartSurface.renderableSeries.add(lineSeries);
    };
    setSeries1();

    // SECOND CHART
    const titleStyle2 = {
        color: "#368BC1",
        fontSize: 30,
        fontFamily: "Courier New"
    };
    const labelStyle2 = {
        color: "#368BC1"
    };
    const setXAxis2 = () => {
        const xAxis = new NumericAxis(wasmContext);
        xAxis.id = ID_X_AXIS_2;
        xAxis.axisTitleStyle = titleStyle2;
        xAxis.labelStyle = labelStyle2;
        xAxis.axisAlignment = EAxisAlignment.Top;
        xAxis.axisTitle = "X2 Axis";
        sciChartSurface.xAxes.add(xAxis);
    };
    setXAxis2();

    const setYAxis2 = () => {
        const yAxis = new NumericAxis(wasmContext);
        yAxis.id = ID_Y_AXIS_2;
        yAxis.axisTitleStyle = titleStyle2;
        yAxis.labelStyle = labelStyle2;
        yAxis.axisAlignment = EAxisAlignment.Right;
        yAxis.axisTitle = "Y2 Axis";
        yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_2;
        sciChartSurface.yAxes.add(yAxis);
    };
    setYAxis2();

    const setSeries2 = () => {
        const lineData = new XyDataSeries(wasmContext);
        const iStep = 10;
        const fAmpltude = 0.1;
        const fFrequency = 1.5;
        for (let i = 0; i < 1000 + iStep; i += iStep) {
            lineData.append(i * 0.001, Math.sin((fFrequency * (i - 100) * Math.PI) / 180.0) * fAmpltude);
        }
        const lineSeries = new FastLineRenderableSeries(wasmContext, {
            stroke: "#368BC1",
            xAxisId: ID_X_AXIS_2,
            yAxisId: ID_Y_AXIS_2,
            strokeThickness: 3,
            dataSeries: lineData
        });
        sciChartSurface.renderableSeries.add(lineSeries);
    };
    setSeries2();

    // Optional: Add some interactivity modifiers to enable zooming and panning
    sciChartSurface.chartModifiers.add(
        new YAxisDragModifier(),
        new XAxisDragModifier(),
        new ZoomPanModifier(),
        new MouseWheelZoomModifier(),
        new ZoomExtentsModifier()
    );

    return { sciChartSurface, wasmContext };
};

export default function MultipleXAxes() {
    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={divElementId} style={{ maxWidth: 900 }} />;
}

Description

Demonstrates a line chart with four series and multiple top / bottom X-Axis and left / right Y-Axis. SciChart supports multiple top or bottom X-Axes and multiple left and right Y-Axes. This example shows in a simple way how to register a line series on each axis.

Tips!

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

Documentation Links

See Also

SciChart: Fast, Realtime, High Performance JavaScript Charts Examples Suite. Sitemap