Using Theme Manager in JavaScript Chart

1import {
2    ECoordinateMode,
3    EHorizontalAnchorPoint,
4    FastLineRenderableSeries,
5    IThemeProvider,
6    NumberRange,
7    NumericAxis,
8    SciChartJSDarkv2Theme,
9    SciChartJSLightTheme,
10    SciChartJsNavyTheme,
11    SciChartSurface,
12    TextAnnotation,
13    XyDataSeries,
14    SweepAnimation,
15} from "scichart";
16import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
17
18export const getChartsInitializationAPI = () => {
19    const createLineData = (whichSeries: number) => {
20        const data = ExampleDataProvider.getFourierSeriesZoomed(1.0, 0.1, 5.0, 5.15);
21
22        return {
23            xValues: data.xValues,
24            yValues: data.yValues.map((y) => (whichSeries === 0 ? y : whichSeries === 1 ? y * 1.1 : y * 1.5)),
25        };
26    };
27
28    const createThemedChart = async (rootElement: string | HTMLDivElement, title: string, theme: IThemeProvider) => {
29        // Create a SciChartSurface passing theme into constructor options
30        const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
31            theme,
32        });
33
34        // Create the X,Y Axis
35        sciChartSurface.xAxes.add(
36            new NumericAxis(wasmContext, {
37                labelPrecision: 2,
38                maxAutoTicks: 8,
39            })
40        );
41        sciChartSurface.yAxes.add(
42            new NumericAxis(wasmContext, {
43                labelPrecision: 2,
44                maxAutoTicks: 8,
45                growBy: new NumberRange(0.05, 0.2),
46            })
47        );
48
49        // Add title annotation
50        sciChartSurface.annotations.add(
51            new TextAnnotation({
52                text: title,
53                fontSize: 16,
54                textColor: theme.tickTextBrush,
55                x1: 0.5,
56                y1: 0,
57                opacity: 0.77,
58                horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
59                xCoordinateMode: ECoordinateMode.Relative,
60                yCoordinateMode: ECoordinateMode.Relative,
61            })
62        );
63
64        let data = createLineData(2);
65
66        // Create and add a line series to the chart
67        sciChartSurface.renderableSeries.add(
68            new FastLineRenderableSeries(wasmContext, {
69                dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
70                stroke: "auto",
71                strokeThickness: 3,
72                animation: new SweepAnimation({ duration: 500 }),
73            })
74        );
75
76        data = createLineData(1);
77
78        // Create and add a line series to the chart
79        sciChartSurface.renderableSeries.add(
80            new FastLineRenderableSeries(wasmContext, {
81                dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
82                stroke: "auto",
83                strokeThickness: 3,
84                animation: new SweepAnimation({ duration: 500 }),
85            })
86        );
87
88        data = createLineData(0);
89
90        // Create and add a line series to the chart
91        sciChartSurface.renderableSeries.add(
92            new FastLineRenderableSeries(wasmContext, {
93                dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
94                stroke: "auto",
95                strokeThickness: 3,
96                animation: new SweepAnimation({ duration: 500 }),
97            })
98        );
99
100        return { sciChartSurface };
101    };
102
103    const createNavyThemeChart = (divId: string | HTMLDivElement) =>
104        createThemedChart(divId, "Navy Theme", new SciChartJsNavyTheme());
105    const createLightThemeChart = (divId: string | HTMLDivElement) =>
106        createThemedChart(divId, "Light Theme", new SciChartJSLightTheme());
107    const createDarkThemeChart = (divId: string | HTMLDivElement) =>
108        createThemedChart(divId, "Dark Theme", new SciChartJSDarkv2Theme());
109    const createCustomThemeChart = (divId: string | HTMLDivElement) =>
110        createThemedChart(divId, "Custom Theme", customTheme);
111
112    return { createNavyThemeChart, createLightThemeChart, createDarkThemeChart, createCustomThemeChart };
113};
114
115// Create a custom theme based on light theme + some modifications.
116// Use applyOverrides() on a theme instance rather than spreading the theme into a plain object:
117// the spread drops the prototype, and SciChartSurface.create() rejects a plain object that has a
118// `type` but no `applyOverrides` as a Builder-API declarative theme definition.
119const customTheme = new SciChartJSLightTheme();
120customTheme.applyOverrides({
121    axisBandsFill: "#83D2F511",
122    axisBorder: "#1F3D68",
123    gridBackgroundBrush: "white",
124    gridBorderBrush: "white",
125    loadingAnimationForeground: "#6495ED77",
126    loadingAnimationBackground: "#E4F5FC",
127    majorGridLineBrush: "#264B9322",
128    minorGridLineBrush: "#264B9306",
129    sciChartBackground: "#E4F5FC",
130    tickTextBrush: "#1F3D68",
131    axisTitleColor: "#1F3D68",
132    // auto / default colour palette for lines and fills
133    strokePalette: ["#264B93", "#A16DAE", "#C52E60"],
134    fillPalette: ["#264B9333", "#A16DAE33", "#C52E6033"],
135});
136