Chart Legends API

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};
103