Using CursorModifier Crosshairs

1import { appTheme } from "../../../theme";
2import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
3import {
4    NumericAxis,
5    NumberRange,
6    SciChartSurface,
7    XyDataSeries,
8    ENumericFormat,
9    FastLineRenderableSeries,
10    EllipsePointMarker,
11    CursorModifier,
12    ZoomPanModifier,
13    ZoomExtentsModifier,
14    MouseWheelZoomModifier,
15    SeriesInfo,
16    CursorTooltipSvgAnnotation,
17} from "scichart";
18
19export const drawExample = async (rootElement: string | HTMLDivElement) => {
20    // Create a SciChartSurface with X,Y Axis
21    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
22        theme: appTheme.SciChartJsTheme,
23    });
24
25    sciChartSurface.xAxes.add(
26        new NumericAxis(wasmContext, {
27            growBy: new NumberRange(0.05, 0.05),
28            labelFormat: ENumericFormat.Decimal,
29            labelPrecision: 4,
30        })
31    );
32
33    sciChartSurface.yAxes.add(
34        new NumericAxis(wasmContext, {
35            growBy: new NumberRange(0.1, 0.1),
36            labelFormat: ENumericFormat.Decimal,
37            labelPrecision: 4,
38        })
39    );
40
41    // Add some data
42    const data1 = ExampleDataProvider.getFourierSeriesZoomed(0.6, 0.13, 5.0, 5.15);
43    sciChartSurface.renderableSeries.add(
44        new FastLineRenderableSeries(wasmContext, {
45            dataSeries: new XyDataSeries(wasmContext, {
46                xValues: data1.xValues,
47                yValues: data1.yValues,
48                dataSeriesName: "First Line Series",
49            }),
50            strokeThickness: 3,
51            stroke: appTheme.VividSkyBlue,
52            pointMarker: new EllipsePointMarker(wasmContext, {
53                width: 7,
54                height: 7,
55                strokeThickness: 0,
56                fill: appTheme.VividSkyBlue,
57            }),
58        })
59    );
60
61    const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
62    sciChartSurface.renderableSeries.add(
63        new FastLineRenderableSeries(wasmContext, {
64            dataSeries: new XyDataSeries(wasmContext, {
65                xValues: data2.xValues,
66                yValues: data2.yValues,
67                dataSeriesName: "Second Line Series",
68            }),
69            strokeThickness: 3,
70            stroke: appTheme.VividOrange,
71            pointMarker: new EllipsePointMarker(wasmContext, {
72                width: 7,
73                height: 7,
74                strokeThickness: 0,
75                fill: appTheme.VividOrange,
76            }),
77        })
78    );
79
80    const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
81    sciChartSurface.renderableSeries.add(
82        new FastLineRenderableSeries(wasmContext, {
83            dataSeries: new XyDataSeries(wasmContext, {
84                xValues: data3.xValues,
85                yValues: data3.yValues,
86                dataSeriesName: "Third Line Series",
87            }),
88            strokeThickness: 3,
89            stroke: appTheme.MutedPink,
90            pointMarker: new EllipsePointMarker(wasmContext, {
91                width: 7,
92                height: 7,
93                strokeThickness: 0,
94                fill: appTheme.MutedPink,
95            }),
96        })
97    );
98
99    // Here is where we add cursor behaviour
100    //
101    sciChartSurface.chartModifiers.add(
102        // Add the CursorModifier (crosshairs) behaviour
103        new CursorModifier({
104            // Defines if crosshair is shown
105            crosshairStroke: appTheme.VividOrange,
106            crosshairStrokeThickness: 1,
107            showXLine: true,
108            showYLine: true,
109            // Shows the default tooltip
110            showTooltip: true,
111            tooltipContainerBackground: appTheme.VividOrange,
112            tooltipTextStroke: appTheme.ForegroundColor,
113            // Defines the axis label colours
114            axisLabelFill: appTheme.VividOrange,
115            axisLabelStroke: appTheme.ForegroundColor,
116            // Shows an additional legend in top left of the screen
117            tooltipLegendTemplate: getTooltipLegendTemplate,
118            // Use SVG to render the tooltip & axis labels of the CursorModifier
119            isSvgOnly: true,
120        }),
121        // Add further zooming and panning behaviours
122        new ZoomPanModifier({ enableZoom: true }),
123        new ZoomExtentsModifier(),
124        new MouseWheelZoomModifier()
125    );
126
127    return { sciChartSurface, wasmContext };
128};
129
130// Override the standard tooltip displayed by CursorModifier
131const getTooltipLegendTemplate = (seriesInfos: SeriesInfo[], svgAnnotation: CursorTooltipSvgAnnotation) => {
132    let outputSvgString = "";
133
134    // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
135    seriesInfos.forEach((seriesInfo, index) => {
136        const lineHeight = 30;
137        const y = 20 + index * lineHeight;
138        // Use the series stroke for legend text colour
139        const textColor = seriesInfo.stroke;
140        // Use the seriesInfo formattedX/YValue for text on the
141        outputSvgString += `<text x="8" y="${y}" font-size="16" font-family="Verdana" fill="${textColor}">
142            ${seriesInfo.seriesName}: X=${seriesInfo.formattedXValue}, Y=${seriesInfo.formattedYValue}
143        </text>`;
144    });
145
146    return `<svg width="100%" height="100%">
147                ${outputSvgString}
148            </svg>`;
149};
150