Create a Custom Theme for React Chart

1import { closeValues, dateValues, highValues, lowValues, openValues } from "./data";
2
3import {
4    FastCandlestickRenderableSeries,
5    FastColumnRenderableSeries,
6    FastLineRenderableSeries,
7    NumericAxis,
8    NumberRange,
9    OhlcDataSeries,
10    RolloverModifier,
11    SciChartSurface,
12    XyDataSeries,
13} from "scichart";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16    // Create a SciChartSurface
17    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
18
19    // Create and apply your custom theme
20    sciChartSurface.applyTheme({
21        annotationsGripsBackgroundBrush: "white",
22        annotationsGripsBorderBrush: "white",
23        axis3DBandsFill: "#1F3D6833",
24        axisBandsFill: "#1F3D6833",
25        axisBorder: "#1F3D68",
26        axisPlaneBackgroundFill: "Transparent",
27        columnFillBrush: "white",
28        columnLineColor: "white",
29        cursorLineBrush: "#6495ED99",
30        defaultColorMapBrush: [
31            { offset: 0, color: "DarkBlue" },
32            { offset: 0.5, color: "CornflowerBlue" },
33            { offset: 1, color: "#FF22AA" },
34        ],
35        downBandSeriesFillColor: "#52CC5490",
36        downBandSeriesLineColor: "#E26565FF",
37        downBodyBrush: "white",
38        downWickColor: "white",
39        gridBackgroundBrush: "white",
40        gridBorderBrush: "white",
41        labelBackgroundBrush: "#6495EDAA",
42        labelBorderBrush: "#6495ED",
43        labelForegroundBrush: "#EEEEEE",
44        legendBackgroundBrush: "#1D2C35",
45        lineSeriesColor: "white",
46        loadingAnimationForeground: "#6495ED",
47        loadingAnimationBackground: "#0D213A",
48        majorGridLineBrush: "#1F3D68",
49        minorGridLineBrush: "#102A47",
50        mountainAreaBrush: "white",
51        mountainLineColor: "white",
52        overviewFillBrush: "white",
53        planeBorderColor: "white",
54        rolloverLineBrush: "#FD9F2533",
55        rubberBandFillBrush: "#99999933",
56        rubberBandStrokeBrush: "#99999977",
57        sciChartBackground: "#0D213A",
58        scrollbarBackgroundBrush: "white",
59        scrollbarBorderBrush: "white",
60        scrollbarGripsBackgroundBrush: "white",
61        scrollbarViewportBackgroundBrush: "white",
62        scrollbarViewportBorderBrush: "white",
63        shadowEffectColor: "#000000FF",
64        textAnnotationBackground: "#6495EDAA",
65        textAnnotationForeground: "#333333",
66        tickTextBrush: "#6495ED",
67        upBandSeriesFillColor: "white",
68        upBandSeriesLineColor: "white",
69        upBodyBrush: "#6495EDA0",
70        upWickColor: "#6495ED",
71        axisTitleColor: "#EEEEEE",
72        chartTitleColor: "#EEEEEE",
73    });
74
75    // Create the XAxis, YAxis
76    const xAxis = new NumericAxis(wasmContext);
77    xAxis.visibleRange = new NumberRange(0, 31);
78    xAxis.axisTitle = "X Axis";
79    sciChartSurface.xAxes.add(xAxis);
80    const yAxis = new NumericAxis(wasmContext);
81    yAxis.visibleRange = new NumberRange(1, 1.2);
82    yAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3);
83    yAxis.labelProvider.formatCursorLabel = (dataValue: number) => dataValue.toFixed(3);
84    sciChartSurface.yAxes.add(yAxis);
85
86    // Create some series with data
87    const series1 = new FastLineRenderableSeries(wasmContext);
88    series1.strokeThickness = 3;
89    series1.stroke = "#16a085";
90    sciChartSurface.renderableSeries.add(series1);
91
92    series1.dataSeries = new XyDataSeries(wasmContext, {
93        xValues: [1, 5, 10, 15, 20, 25, 30],
94        yValues: [1.12, 1.121, 1.119, 1.11, 1.115, 1.112, 1.1],
95    });
96
97    const series2 = new FastCandlestickRenderableSeries(wasmContext, {
98        strokeThickness: 2,
99        dataSeries: new OhlcDataSeries(wasmContext, {
100            xValues: dateValues,
101            openValues,
102            highValues,
103            lowValues,
104            closeValues,
105        }),
106        dataPointWidth: 0.5,
107    });
108    series2.rolloverModifierProps.tooltipColor = "#d0d3d4";
109    series2.rolloverModifierProps.markerColor = "#d0d3d4";
110    sciChartSurface.renderableSeries.add(series2);
111
112    const series3 = new FastColumnRenderableSeries(wasmContext, {
113        fill: "rgba(176, 196, 222, 0.7)",
114        stroke: "#4682b4",
115        strokeThickness: 2,
116        dataPointWidth: 0.5,
117    });
118    sciChartSurface.renderableSeries.add(series3);
119    const dataSeries = new XyDataSeries(wasmContext);
120    for (let i = 1; i <= 30; i++) {
121        dataSeries.append(i, 1 + Math.sin(i * 0.1) * 0.1);
122    }
123    series3.dataSeries = dataSeries;
124
125    // Create tootip behaviour
126    sciChartSurface.chartModifiers.add(new RolloverModifier());
127    return { sciChartSurface, wasmContext };
128};
129