SciChart.js
v^1.2.1463

SciChart.js - High Performance Realtime Javascript Charts Examples Suite

Using CursorModifier Crosshairs

Demonstrates how to create crosshairs on mouseover using SciChart.js, High Performance JavaScript Charts

Source Code

View on GitHub
import * as React from "react";
import { TWebAssemblyChart } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { TSciChart } from "scichart/types/TSciChart";
import { IXyDataSeriesOptions, XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { SciChartSurface } from "scichart";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";
import { EColor } from "scichart/types/Color";
import { EAxisAlignment } from "scichart/types/AxisAlignment";
import { ENumericFormat } from "scichart/types/NumericFormat";

const divElementId = "chart";

const createDataSeries = (wasmContext2: TSciChart, index: number, options?: IXyDataSeriesOptions) => {
    const sigma = Math.pow(0.6, index);
    const dataSeries = new XyDataSeries(wasmContext2, options);
    for (let i = 0; i < 100; i++) {
        const grow = 1 + i / 99;
        dataSeries.append(i, Math.sin((Math.PI * i) / 15) * grow * sigma);
    }
    return dataSeries;
};

const drawExample = async (): Promise<TWebAssemblyChart> => {
    const colorsArr = [EColor.Green, EColor.LightGrey];

    // Create a SciChartSurface with X,Y Axis
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
    const xAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) });
    xAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext, {
        growBy: new NumberRange(0.1, 0.1),
        axisAlignment: EAxisAlignment.Left
    });
    yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_2;
    sciChartSurface.yAxes.add(yAxis);

    // Create some data
    const firstSeriesData = createDataSeries(wasmContext, 0, { dataSeriesName: "Sinewave Green" });
    const secondSeriesData = createDataSeries(wasmContext, 1);

    // Create some line series and add to the chart
    const renderableSeries1 = new FastLineRenderableSeries(wasmContext, {
        stroke: colorsArr[0],
        strokeThickness: 3,
        dataSeries: firstSeriesData,
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 5,
            height: 5,
            strokeThickness: 2,
            fill: "white",
            stroke: colorsArr[0]
        })
    });
    sciChartSurface.renderableSeries.add(renderableSeries1);

    const renderableSeries2 = new FastLineRenderableSeries(wasmContext, {
        stroke: colorsArr[1],
        strokeThickness: 3,
        dataSeries: secondSeriesData,
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 5,
            height: 5,
            strokeThickness: 2,
            fill: "white",
            stroke: colorsArr[1]
        })
    });
    sciChartSurface.renderableSeries.add(renderableSeries2);

    // Here is where we add cursor behaviour
    //
    sciChartSurface.chartModifiers.add(
        // Add the CursorModifier (crosshairs) behaviour
        new CursorModifier({
            crosshairStroke: "red",
            crosshairStrokeThickness: 1,
            tooltipContainerBackground: "green",
            tooltipTextStroke: "white",
            showTooltip: true,
            axisLabelFill: "green",
            axisLabelStroke: "white"
        }),
        // Add further zooming and panning behaviours
        new ZoomPanModifier(),
        new ZoomExtentsModifier(),
        new MouseWheelZoomModifier()
    );

    sciChartSurface.zoomExtents();
    return { sciChartSurface, wasmContext };
};

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

// 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 using the CursorModifier, part of the ChartModifier API, to add a cursor and tooltips which tracks the mouse.

This can be used to add Tooltips to a JavaScript chart as well as draw cursors (crosshairs) and axis labels values as the user moves the mouse.

Documentation Links

All JavaScript Chart Examples

SciChart.js: Fast, Realtime, High Performance