Using Rollover Modifier Tooltips
Demonstrates how to create tooltips on mouse-over using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
ExampleDataProvider.ts
theme.ts
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: 2,
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};
166Using Rollover Modifier Tooltips with JavaScript
Overview
This example demonstrates how to create an interactive chart using SciChart.js in a pure JavaScript environment. It showcases the creation of a SciChartSurface with customized numeric axes, data series rendered from Fourier series data, and advanced interactivity through custom tooltip behaviors.
Technical Implementation
The chart is initialized by asynchronously creating a SciChartSurface and setting up numeric axes with properties such as growBy, labelFormat, and labelPrecision (see the NumericAxis documentation for more details). Three separate FastLineRenderableSeries are added, each using an EllipsePointMarker to draw data points. Custom tooltip templates and legends are implemented by configuring a RolloverModifier, which overrides the default tooltip behavior as detailed in the RolloverModifier documentation. Additional interactive behaviors are provided with zooming and panning modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier (refer to the ZoomPanModifier documentation for implementation guidance). WebAssembly is leveraged via the wasmContext to enhance performance, with more optimization techniques described in the Performance Tips & Tricks documentation.
Features and Capabilities
This example highlights advanced features including real-time tooltip customization and dynamic legend templates. The custom tooltips display formatted x and y values along with a tailored legend rendered using inline SVG, enhancing data readability. Such capabilities are critical for interactive data analysis and can be further explored in the Adding Tooltips and Legends tutorial.
Integration and Best Practices
The implementation follows best practices in resource management by providing a dedicated destructor that calls sciChartSurface.delete() to properly dispose of the chart instance, as recommended in the Memory Best Practices guide. By integrating Fourier series data with custom point markers and interactivity through various chart modifiers, the example offers a comprehensive solution without relying on any framework-specific hooks or builder APIs. Developers can refer to the SciChart.js User Manual for further insights on extending these techniques.
javascript Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
JavaScript Chart Hit-Test API
Demonstrates Hit-Testing a JavaScript Chart - point and click on the chart and get feedback about what data-points were clicked
Using CursorModifier Crosshairs
Demonstrates adding a Cursor (Crosshair) to a JavaScript Chart with SciChart.js CursorModifier
Using VerticalSliceModifier
Demonstrates adding Tooltips at certain positions to a JavaScript Chart with SciChart.js VerticalSliceModifier
Datapoint Metadata Tooltips on JavaScript Chart
Demonstrates using MetaData in a JavaScript Chart - add custom data to points for display or to drive visual customisation
Using Series Selection
Demonstrates Hit-Testing a JavaScript Chart - point and click on the chart and get feedback about what data-points were clicked
JavaScript Chart Data Point Selection
Demonstrates the DatapointSelectionModifier, which provides a UI to select one or many data points, and works with DataPointSelectionPaletteProvider to change the appearance of selected points
Using Custom Tooltips
Demonstrates how to customise the tooltips for Rollover, Cursor and VerticalSlice modifiers in a JavaScript Chart with SciChart.js