Using Rollover Modifier Tooltips

1import { appTheme } from "../../../theme";
2import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
3import {
4    EllipsePointMarker,
5    ENumericFormat,
6    FastLineRenderableSeries,
7    MouseWheelZoomModifier,
8    NumberRange,
9    NumericAxis,
10    RolloverLegendSvgAnnotation,
11    RolloverModifier,
12    SciChartSurface,
13    XyDataSeries,
14    ZoomExtentsModifier,
15    ZoomPanModifier,
16} from "scichart";
17import { SeriesInfo } 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    const lineSeries0 = new FastLineRenderableSeries(wasmContext, {
44        dataSeries: new XyDataSeries(wasmContext, {
45            xValues: data1.xValues,
46            yValues: data1.yValues,
47            dataSeriesName: "First Line Series",
48        }),
49        strokeThickness: 3,
50        stroke: appTheme.VividSkyBlue,
51        pointMarker: new EllipsePointMarker(wasmContext, {
52            width: 7,
53            height: 7,
54            strokeThickness: 0,
55            fill: appTheme.VividSkyBlue,
56        }),
57    });
58    sciChartSurface.renderableSeries.add(lineSeries0);
59
60    const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
61    const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
62        dataSeries: new XyDataSeries(wasmContext, {
63            xValues: data2.xValues,
64            yValues: data2.yValues,
65            dataSeriesName: "Second Line Series",
66        }),
67        strokeThickness: 3,
68        stroke: appTheme.VividOrange,
69        pointMarker: new EllipsePointMarker(wasmContext, {
70            width: 7,
71            height: 7,
72            strokeThickness: 0,
73            fill: appTheme.VividOrange,
74        }),
75    });
76    sciChartSurface.renderableSeries.add(lineSeries1);
77
78    const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
79    const lineSeries2 = new FastLineRenderableSeries(wasmContext, {
80        dataSeries: new XyDataSeries(wasmContext, {
81            xValues: data3.xValues,
82            yValues: data3.yValues,
83            dataSeriesName: "Third Line Series",
84        }),
85        strokeThickness: 3,
86        stroke: appTheme.MutedPink,
87        pointMarker: new EllipsePointMarker(wasmContext, {
88            width: 7,
89            height: 7,
90            strokeThickness: 0,
91            fill: appTheme.MutedPink,
92        }),
93    });
94    sciChartSurface.renderableSeries.add(lineSeries2);
95
96    // Here is where we add rollover tooltip behaviour
97    //
98    sciChartSurface.chartModifiers.add(
99        new RolloverModifier({
100            // Defines if rollover vertical line is shown
101            showRolloverLine: true,
102            rolloverLineStrokeThickness: 1,
103            rolloverLineStroke: appTheme.VividOrange,
104            // Shows the default tooltip
105            showTooltip: true,
106            // Optional: Overrides the legend template to display additional info top-left of the chart
107            tooltipLegendTemplate: getTooltipLegendTemplate,
108            // Optional: Overrides the content of the tooltip
109            tooltipDataTemplate: getTooltipDataTemplate,
110        })
111    );
112
113    // Optional: Additional customisation may be done per-series, e.g.
114    //
115    lineSeries0.rolloverModifierProps.tooltipTitle = "Custom Tooltip Title";
116    lineSeries0.rolloverModifierProps.tooltipTextColor = appTheme.DarkIndigo;
117    lineSeries2.rolloverModifierProps.tooltipColor = appTheme.VividPink;
118
119    // Add further zooming and panning behaviours
120    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
121    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
122    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
123
124    sciChartSurface.zoomExtents();
125    return { sciChartSurface, wasmContext };
126};
127
128const getTooltipDataTemplate = (
129    seriesInfo: SeriesInfo,
130    tooltipTitle: string,
131    tooltipLabelX: string,
132    tooltipLabelY: string
133) => {
134    // Lines here are returned to the tooltip and displayed as text-line per tooltip
135    const lines: string[] = [];
136    lines.push(tooltipTitle);
137    lines.push(`x: ${seriesInfo.formattedXValue}`);
138    lines.push(`y: ${seriesInfo.formattedYValue}`);
139    return lines;
140};
141
142// Override the standard tooltip displayed by CursorModifier
143const getTooltipLegendTemplate = (seriesInfos: SeriesInfo[], svgAnnotation: RolloverLegendSvgAnnotation) => {
144    let outputSvgString = "";
145
146    // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
147    seriesInfos.forEach((seriesInfo, index) => {
148        if (seriesInfo.isWithinDataBounds) {
149            const lineHeight = 30;
150            const y = 50 + index * lineHeight;
151            // Use the series stroke for legend text colour
152            const textColor = seriesInfo.stroke;
153            // Use the seriesInfo formattedX/YValue for text on the
154            outputSvgString += `<text x="8" y="${y}" font-size="16" font-family="Verdana" fill="${textColor}">
155                                    ${seriesInfo.seriesName}: X=${seriesInfo.formattedXValue}, Y=${seriesInfo.formattedYValue}
156                                </text>`;
157        }
158    });
159
160    // Content here is returned for the custom legend placed in top-left of the chart
161    return `<svg width="100%" height="100%">
162                <text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Custom Rollover Legend</text>
163                ${outputSvgString}
164            </svg>`;
165};
166