Using VerticalSliceModifier
Demonstrates how to use tooltips at fixed positions 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 VerticalSliceModifier,
12 SciChartSurface,
13 XyDataSeries,
14 ZoomExtentsModifier,
15 ZoomPanModifier,
16 SeriesInfo,
17 TWebAssemblyChart,
18 ECoordinateMode,
19 NativeTextAnnotation,
20 EWrapTo,
21 EHorizontalAnchorPoint,
22 TextAnnotation,
23 Logger,
24} from "scichart";
25
26export const drawExample = async (rootElement: string | HTMLDivElement) => {
27 // Create a SciChartSurface with X,Y Axis
28 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
29 theme: appTheme.SciChartJsTheme,
30 });
31 sciChartSurface.xAxes.add(
32 new NumericAxis(wasmContext, {
33 growBy: new NumberRange(0.05, 0.05),
34 labelFormat: ENumericFormat.Decimal,
35 labelPrecision: 4,
36 })
37 );
38
39 sciChartSurface.yAxes.add(
40 new NumericAxis(wasmContext, {
41 growBy: new NumberRange(0.1, 0.1),
42 labelFormat: ENumericFormat.Decimal,
43 labelPrecision: 4,
44 })
45 );
46
47 // Add some data
48 const data1 = ExampleDataProvider.getFourierSeriesZoomed(0.6, 0.13, 5.0, 5.15);
49 const lineSeries0 = new FastLineRenderableSeries(wasmContext, {
50 dataSeries: new XyDataSeries(wasmContext, {
51 xValues: data1.xValues,
52 yValues: data1.yValues,
53 dataSeriesName: "First Line Series",
54 }),
55 strokeThickness: 3,
56 stroke: appTheme.VividSkyBlue,
57 pointMarker: new EllipsePointMarker(wasmContext, {
58 width: 7,
59 height: 7,
60 strokeThickness: 0,
61 fill: appTheme.VividSkyBlue,
62 }),
63 });
64 sciChartSurface.renderableSeries.add(lineSeries0);
65
66 const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
67 const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
68 dataSeries: new XyDataSeries(wasmContext, {
69 xValues: data2.xValues,
70 yValues: data2.yValues,
71 dataSeriesName: "Second Line Series",
72 }),
73 strokeThickness: 3,
74 stroke: appTheme.VividOrange,
75 pointMarker: new EllipsePointMarker(wasmContext, {
76 width: 7,
77 height: 7,
78 strokeThickness: 0,
79 fill: appTheme.VividOrange,
80 }),
81 });
82 sciChartSurface.renderableSeries.add(lineSeries1);
83
84 const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
85 const lineSeries2 = new FastLineRenderableSeries(wasmContext, {
86 dataSeries: new XyDataSeries(wasmContext, {
87 xValues: data3.xValues,
88 yValues: data3.yValues,
89 dataSeriesName: "Third Line Series",
90 }),
91 strokeThickness: 3,
92 stroke: appTheme.MutedPink,
93 pointMarker: new EllipsePointMarker(wasmContext, {
94 width: 7,
95 height: 7,
96 strokeThickness: 0,
97 fill: appTheme.MutedPink,
98 }),
99 });
100 sciChartSurface.renderableSeries.add(lineSeries2);
101
102 // Here is where we add rollover tooltip behaviour
103 //
104 const vSlice1 = new VerticalSliceModifier({
105 x1: 5.06,
106 xCoordinateMode: ECoordinateMode.DataValue,
107 isDraggable: true,
108 // Defines if rollover vertical line is shown
109 showRolloverLine: true,
110 rolloverLineStrokeThickness: 1,
111 rolloverLineStroke: appTheme.VividGreen,
112 lineSelectionColor: appTheme.VividGreen,
113 // Shows the default tooltip
114 showTooltip: true,
115 // Optional: Overrides the legend template to display additional info top-left of the chart
116 tooltipLegendTemplate: getTooltipLegendTemplate,
117 // Optional: Overrides the content of the tooltip
118 tooltipDataTemplate: getTooltipDataTemplate,
119 });
120 const vSlice2 = new VerticalSliceModifier({
121 x1: 0.75,
122 xCoordinateMode: ECoordinateMode.Relative,
123 isDraggable: true,
124 // Defines if rollover vertical line is shown
125 showRolloverLine: true,
126 rolloverLineStrokeThickness: 1,
127 rolloverLineStroke: appTheme.VividOrange,
128 lineSelectionColor: appTheme.VividOrange,
129 // Shows the default tooltip
130 showTooltip: true,
131 // Optional: Overrides the content of the tooltip
132 tooltipDataTemplate: getTooltipDataTemplate,
133 });
134 sciChartSurface.chartModifiers.add(vSlice1, vSlice2);
135
136 // Optional: Additional customisation may be done per-series, e.g.
137 //
138 lineSeries0.rolloverModifierProps.tooltipTextColor = appTheme.DarkIndigo;
139 lineSeries2.rolloverModifierProps.tooltipColor = appTheme.VividPink;
140
141 const textAnn1 = new NativeTextAnnotation({
142 text: "xCoordinateMode: DataValue\nMoves with data\nLinked to Legend\nDraggable",
143 textColor: appTheme.ForegroundColor,
144 y1: 0.88,
145 xCoordinateMode: ECoordinateMode.Pixel,
146 yCoordinateMode: ECoordinateMode.Relative,
147 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
148 });
149 // Link the annotation position with the verticalSlice
150 sciChartSurface.layoutMeasured.subscribe((data) => {
151 textAnn1.x1 = vSlice1.verticalLine.x1;
152 });
153 sciChartSurface.annotations.add(textAnn1);
154
155 const textAnn2 = new NativeTextAnnotation({
156 text: "xCoordinateMode: Relative\nFixed position\nDraggable ",
157 textColor: appTheme.ForegroundColor,
158 y1: 0.88,
159 xCoordinateMode: ECoordinateMode.Pixel,
160 yCoordinateMode: ECoordinateMode.Relative,
161 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
162 });
163 sciChartSurface.layoutMeasured.subscribe((data) => {
164 textAnn2.x1 = vSlice2.verticalLine.x1;
165 });
166 sciChartSurface.annotations.add(textAnn2);
167
168 // Add further zooming and panning behaviours
169 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
170 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
171 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
172
173 sciChartSurface.zoomExtents();
174 return { sciChartSurface, wasmContext };
175};
176
177const getTooltipDataTemplate = (
178 seriesInfo: SeriesInfo,
179 tooltipTitle: string,
180 tooltipLabelX: string,
181 tooltipLabelY: string
182) => {
183 // Lines here are returned to the tooltip and displayed as text-line per tooltip
184 const lines: string[] = [];
185 lines.push(tooltipTitle);
186 lines.push(`x: ${seriesInfo.formattedXValue}`);
187 lines.push(`y: ${seriesInfo.formattedYValue}`);
188 return lines;
189};
190
191// Override the standard tooltip displayed by CursorModifier
192const getTooltipLegendTemplate = (seriesInfos: SeriesInfo[], svgAnnotation: RolloverLegendSvgAnnotation) => {
193 let outputSvgString = "";
194
195 // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
196 seriesInfos.forEach((seriesInfo, index) => {
197 if (seriesInfo.isWithinDataBounds) {
198 const lineHeight = 30;
199 const y = 50 + index * lineHeight;
200 // Use the series stroke for legend text colour
201 const textColor = seriesInfo.stroke;
202 // Use the seriesInfo formattedX/YValue for text on the
203 outputSvgString += `<text x="8" y="${y}" font-size="16" font-family="Verdana" fill="${textColor}">
204 ${seriesInfo.seriesName}: X=${seriesInfo.formattedXValue}, Y=${seriesInfo.formattedYValue}
205 </text>`;
206 }
207 });
208
209 // Content here is returned for the custom legend placed in top-left of the chart
210 return `<svg width="100%" height="100%">
211 <text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Custom Rollover Legend</text>
212 ${outputSvgString}
213 </svg>`;
214};
215Using Vertical Slice Modifier (JavaScript)
Overview
This example demonstrates how to integrate SciChart.js into a JavaScript application using a Vertical Slice Modifier to enhance rollover interactivity. The chart is created by instantiating a SciChartSurface with NumericAxis and three FastLineRenderableSeries populated with Fourier series data. It then adds two VerticalSliceModifier tools that support custom tooltip templates and dynamic annotations, providing a rich interactive experience.
Technical Implementation
The core implementation is found in the drawExample module. Here, the chart is created using the standard SciChart.js API, without relying on any frameworks. Axes are defined with specific number ranges and label formats, and the FastLineRenderableSeries is used to render high performance line series data. The example leverages the VerticalSliceModifier to enable rollover tooltips and interactive vertical slice behavior by configuring properties such as xCoordinateMode, isDraggable, and tooltip templates which are customized by functions like getTooltipDataTemplate and getTooltipLegendTemplate. Additionally, dynamic updates are implemented via preRender event subscriptions that reposition NativeTextAnnotations to follow the vertical slice. For further details on custom tooltip templates, refer to Using Rollover Modifier Tooltips.
Features and Capabilities
The example showcases several advanced features of SciChart.js including:
-
Custom Tooltip Templates: The default tooltips provided by the
VerticalSliceModifierare overridden using custom functions, enabling detailed, formatted information display during rollover interactions. -
Coordinate Modes: By using different values for
ECoordinateMode(such asDataValueandRelative), the example demonstrates how to position modifiers and annotations precisely. -
High Performance Rendering: Employing
FastLineRenderableSeriestogether with the performance benefits of the WASM context highlights best practices for handling large and complex datasets. For performance optimization tips, see Performance Tips & Tricks. -
Interactive Modifiers: In addition to the Vertical Slice Modifier, other chart modifiers like
ZoomPanModifier,ZoomExtentsModifier, andMouseWheelZoomModifierare added to grant users comprehensive navigation capabilities. -
Resource Cleanup: The vanilla implementation shows a destructor pattern to properly dispose of chart resources when no longer needed, ensuring efficient memory management. This approach is discussed in various resource cleanup guidelines provided in SciChart documentation and related best practices.
Integration and Best Practices
This example is built entirely using JavaScript, demonstrating that SciChart.js can be integrated without additional frameworks. The minimal setup involves simply importing the drawExample module and invoking it with a target DOM element. Best practices include proper resource cleanup via a destructor function and the use of event subscriptions (such as preRender) for dynamic UI updates. Developers interested in integrating SciChart.js into non-framework scenarios can refer to the Tutorial 01 - Including SciChart.js in an HTML Page using CDN and Getting Started with SciChart JS.
By following these patterns and leveraging built-in features such as custom tooltips, precise coordinate modes, and fast rendering techniques, the example provides a robust template for creating highly interactive and performance-optimized charts in JavaScript.
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 Rollover Modifier Tooltips
Demonstrates adding Tooltips on mouse-move to a JavaScript Chart with SciChart.js RolloverModifier
Using CursorModifier Crosshairs
Demonstrates adding a Cursor (Crosshair) to a JavaScript Chart with SciChart.js CursorModifier
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