Demonstrates how to add a legend to a Angular 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 seamlessly integrate SciChart.js's LegendModifier within an Angular application. The sample sets up a SciChartSurface with numeric axes and multiple line series, then dynamically adds an interactive legend to the chart. Developers can leverage Angular's data binding and event handling to toggle legend visibility, checkboxes, and series markers. For a detailed overview of the legend functionality, refer to the Legend Modifier Documentation.
In this example, the chart is initialized by creating a SciChartSurface and adding numeric axes along with several line series that represent Fourier series data. The integration focuses on adding a LegendModifier to the sciChartSurface.chartModifiers collection to handle dynamic updating of legend properties such as placement and orientation. Key to this implementation is setting XyDataSeries.dataSeriesName which allows the legend to identify the series, and setting of properties such as LegendModifier.placement, orientation and showCheckboxes, showSeriesMarkers to configure the legend appearance and behaviour. Angular’s event binding techniques are used to capture user interactions and update the chart dynamically.
The example highlights several advanced features including real-time updates of legend properties. Users can modify the legend placement via ELegendPlacement (TopLeft, TopRight, BottomLeft, BottomRight) and ELegendOrientation (Vertical, Horizontal) dynamically. Additional interactive controls allow the toggling of series markers and checkboxes within the legend. This flexibility enables developers to create highly customizable and interactive charting experiences.
Efficient integration of SciChart.js with Angular is achieved by leveraging Angular’s robust event handling and lifecycle management. Initializing the SciChartSurface using the ScichartAngularComponent, a part of the open source scichart-angular package ensures optimal performance, while using Angular reactive techniques helps in the dynamic update of legend properties without negatively impacting the application’s responsiveness.
No items available