Using VerticalSliceModifier
Demonstrates how to use tooltips at fixed positions using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
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 in React
Overview
This example demonstrates how to integrate SciChart.js into a React application by utilizing the VerticalSliceModifier to implement custom tooltips and annotations at fixed positions. The example creates an interactive chart with multiple line series rendered using high performance WebGL via WebAssembly and illustrates how to add draggable vertical slices for advanced hit testing and dynamic data display.
Technical Implementation
The chart is integrated into React using the SciChart React package. The initialization function, passed as a prop to the <SciChartReact/> component, sets up the chart surface, configures NumericAxis with specific label formatting and precision, and adds several line series created with the FastLineRenderableSeries to ensure optimal rendering performance. The example leverages the VerticalSliceModifier to display tooltips at specified data and relative coordinates, utilizing the custom callback functions to format tooltip text. Furthermore, event subscriptions on the chart’s preRender event dynamically update the position of annotations linked to the vertical slices, following best practices outlined in the Annotations API Overview.
Features and Capabilities
This example highlights several advanced features including real-time updates of tooltip information and dynamic annotation positioning. The VerticalSliceModifier allows for both data-bound (using DataValue coordinate mode) and fixed (using Relative coordinate mode) positions, with parameters that enable tooltip customization through custom tooltip templates. Additionally, the integration supports interactive features such as zooming and panning via modifiers like the ZoomPanModifier, enhancing the overall user experience with sophisticated data exploration capabilities.
Integration and Best Practices
The implementation follows best practices for React integration by encapsulating the SciChart initialization within a dedicated function that is passed to the <SciChartReact/> component. Developers are encouraged to use the provided SciChart React documentation for guidance on constructing reusable chart components. Performance optimizations are achieved with the FastLineRenderableSeries and efficient WebGL rendering underlined in the Performance Tips. Additionally, the use of vertical slices combined with dynamic event handling provides a robust solution for implementing interactive tooltip and annotation features in high performance charts.
For further reading on interactive modifiers, refer to the official SciChart.js VerticalSliceModifier Documentation.
react Chart Examples & Demos
See Also: Tooltips and Hit-Test (7 Demos)
React Chart Hit-Test API
Demonstrates Hit-Testing a React 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 React Chart with SciChart.js RolloverModifier
Using CursorModifier Crosshairs
Demonstrates adding a Cursor (Crosshair) to a React Chart with SciChart.js CursorModifier
Datapoint Metadata Tooltips on React Chart
Demonstrates using MetaData in a React Chart - add custom data to points for display or to drive visual customisation
Using Series Selection
Demonstrates Hit-Testing a React Chart - point and click on the chart and get feedback about what data-points were clicked
React 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 React Chart with SciChart.js