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 { 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";
import { ENumericFormat } from "scichart/types/NumericFormat";

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 }} />;
}

// 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 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.js: Fast, Realtime, High Performance JavaScript Charts | JavaScript Chart Examples | Sitemap