Demonstrates how to add a legend to a React Chart using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
ExampleDataProvider.ts
theme.ts
1import {
2 ELegendOrientation,
3 ELegendPlacement,
4 ENumericFormat,
5 FastLineRenderableSeries,
6 LegendModifier,
7 NumericAxis,
8 NumberRange,
9 SciChartSurface,
10 XyDataSeries,
11 getLegendItemHtml,
12} from "scichart";
13import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
14
15import { appTheme } from "../../../theme";
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
19 theme: appTheme.SciChartJsTheme,
20 });
21
22 // Add an X, Y Axis
23 sciChartSurface.xAxes.add(
24 new NumericAxis(wasmContext, {
25 labelFormat: ENumericFormat.Decimal,
26 labelPrecision: 2,
27 })
28 );
29 sciChartSurface.yAxes.add(
30 new NumericAxis(wasmContext, {
31 labelFormat: ENumericFormat.Decimal,
32 labelPrecision: 2,
33 growBy: new NumberRange(0.1, 0.1),
34 })
35 );
36
37 // Add some data
38 const data0 = ExampleDataProvider.getFourierSeriesZoomed(1.0, 0.1, 5.0, 5.15);
39 sciChartSurface.renderableSeries.add(
40 new FastLineRenderableSeries(wasmContext, {
41 dataSeries: new XyDataSeries(wasmContext, {
42 xValues: data0.xValues,
43 yValues: data0.yValues,
44 dataSeriesName: "First Line Series",
45 }),
46 strokeThickness: 3,
47 stroke: "auto",
48 })
49 );
50
51 const data1 = ExampleDataProvider.getFourierSeriesZoomed(0.6, 0.13, 5.0, 5.15);
52 sciChartSurface.renderableSeries.add(
53 new FastLineRenderableSeries(wasmContext, {
54 dataSeries: new XyDataSeries(wasmContext, {
55 xValues: data1.xValues,
56 yValues: data1.yValues,
57 dataSeriesName: "Second Line Series",
58 }),
59 strokeThickness: 3,
60 stroke: "auto",
61 })
62 );
63
64 const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
65 sciChartSurface.renderableSeries.add(
66 new FastLineRenderableSeries(wasmContext, {
67 dataSeries: new XyDataSeries(wasmContext, {
68 xValues: data2.xValues,
69 yValues: data2.yValues,
70 dataSeriesName: "Third Line Series",
71 }),
72 strokeThickness: 3,
73 stroke: "auto",
74 })
75 );
76
77 const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
78 sciChartSurface.renderableSeries.add(
79 new FastLineRenderableSeries(wasmContext, {
80 dataSeries: new XyDataSeries(wasmContext, {
81 xValues: data3.xValues,
82 yValues: data3.yValues,
83 dataSeriesName: "Fourth Line Series",
84 }),
85 strokeThickness: 3,
86 stroke: "auto",
87 })
88 );
89
90 // add the legend modifier and show legend in the top left
91 const legendModifier = new LegendModifier({
92 showLegend: true,
93 placement: ELegendPlacement.TopLeft,
94 orientation: ELegendOrientation.Vertical,
95 showCheckboxes: true,
96 showSeriesMarkers: true,
97 });
98
99 sciChartSurface.chartModifiers.add(legendModifier);
100
101 return { sciChartSurface, wasmContext, legendModifier };
102};
103This example demonstrates how to integrate a dynamic legend into a SciChart.js chart within a React application. The example creates multiple line series and attaches a customizable legend using the SciChart.js LegendModifier, enabling interactive control over the legend's visibility, placement, and orientation.
The chart is initialized in a dedicated function that uses SciChartSurface.create() along with react components from the <SciChartReact/> package. The created chart contains several renderable series, each provided with its own data series, and the legend is configured by adding a LegendModifier to the sciChartSurface.chartModifiers collection. Key to this implementation is the setting of XyDataSeries.dataSeriesName which allows the legend to identify the series, as well as the LegendModifier properties such as placement, orientation and showCheckboxes, showSeriesMarkers which help configure the placement and behaviour of the legend.
The example highlights several advanced features including real-time update capabilities for the legend through dynamic state management. Users can toggle the legend's visibility, enable or disable checkboxes, and alter both the placement and orientation of the legend on the chart. This dynamic interactivity leverages React’s state and event handling mechanisms to update the SciChart.js LegendModifier seamlessly. More details can be found in the Legend Modifier Documentation.
The implementation follows best practices for integrating third-party WebGL charts into React by utilizing the <SciChartReact/> component to manage chart lifecycles and performance. By using React refs and state, the application efficiently synchronizes user interactions with the underlying chart, ensuring optimal performance and responsiveness. This approach not only streamlines the dynamic update of the chart’s legend but also facilitates a clear separation between the chart logic and the React component UI, an important principle in modern React development.
No items available