Chart Background Image with Transparency

1import {
2    SciChartSurface,
3    NumericAxis,
4    MouseWheelZoomModifier,
5    ZoomExtentsModifier,
6    ZoomPanModifier,
7    SciChartJSLightTheme,
8    FastBubbleRenderableSeries,
9    XyzDataSeries,
10    EllipsePointMarker,
11    NumberRange,
12    SplineLineRenderableSeries,
13    SweepAnimation,
14    FastColumnRenderableSeries,
15    XyDataSeries,
16    WaveAnimation,
17    TextLabelProvider,
18} from "scichart";
19
20import { appTheme } from "../../../theme";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
24        theme: new SciChartJSLightTheme(),
25    });
26
27    // Set the background to Transparent to show the underlying DOM through
28    sciChartSurface.background = "Transparent";
29
30    const axisOptionsCommon = {
31        axisBandsFill: "#33333311",
32        majorGridLineStyle: { color: "#FFFFFF55" },
33        minorGridLineStyle: { color: "#FFFFFF22" },
34        labelStyle: { color: "#EEE" },
35        axisTitleStyle: { color: "#EEE" },
36    };
37
38    // Add X,Y axis. Note that Axis.axisBandsFill must be modified to show the background through.
39    // This is done in the axisOptions above
40    sciChartSurface.xAxes.add(
41        new NumericAxis(wasmContext, {
42            ...axisOptionsCommon,
43            axisBorder: { borderTop: 1, color: "#ccc" },
44            growBy: new NumberRange(0.1, 0.1),
45            axisTitle: "Quarter (Year)",
46            labelProvider: new TextLabelProvider({
47                labels: ["Q1 (2020)", "Q1 (2021)", "Q1 (2022)", "Q1 (2023)"],
48            }),
49        })
50    );
51    sciChartSurface.yAxes.add(
52        new NumericAxis(wasmContext, {
53            ...axisOptionsCommon,
54            axisBorder: { borderLeft: 1, color: "#ccc" },
55            growBy: new NumberRange(0.0, 0.1),
56            axisTitle: "Sales $(Billions)",
57        })
58    );
59
60    // Add some series
61    //
62
63    // Line series with spline interpolation
64    sciChartSurface.renderableSeries.add(
65        new SplineLineRenderableSeries(wasmContext, {
66            dataSeries: new XyDataSeries(wasmContext, {
67                xValues: [0, 1, 2, 3],
68                yValues: [2, 3.5, 3.0, 5],
69            }),
70            stroke: appTheme.VividSkyBlue,
71            strokeThickness: 3,
72            animation: new SweepAnimation({ duration: 500 }),
73        })
74    );
75
76    // Bubble series
77    sciChartSurface.renderableSeries.add(
78        new FastBubbleRenderableSeries(wasmContext, {
79            dataSeries: new XyzDataSeries(wasmContext, {
80                xValues: [0, 1, 2, 3],
81                yValues: [2, 3.5, 3.0, 5],
82                zValues: [30, 90, 40, 60],
83            }),
84            pointMarker: new EllipsePointMarker(wasmContext, {
85                width: 64,
86                height: 64,
87                strokeThickness: 2,
88                stroke: appTheme.PaleSkyBlue,
89                fill: appTheme.VividSkyBlue + "33",
90            }),
91            animation: new SweepAnimation({ delay: 200, duration: 500, fadeEffect: true }),
92        })
93    );
94
95    // Column series
96    sciChartSurface.renderableSeries.add(
97        new FastColumnRenderableSeries(wasmContext, {
98            dataSeries: new XyDataSeries(wasmContext, {
99                xValues: [0, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.2, 2.4, 2.6, 2.8, 3],
100                yValues: [0.8, 1, 1, 1.1, 1.2, 5.2, 2.8, 2.7, 2.6, 2.6, 2.5, 2.5, 2.5, 2.6, 3.2, 4],
101            }),
102            stroke: appTheme.MutedSkyBlue,
103            fill: appTheme.VividSkyBlue + "33",
104            strokeThickness: 2,
105            dataPointWidth: 0.57,
106            cornerRadius: 10,
107            animation: new WaveAnimation({ delay: 400, duration: 600, fadeEffect: true }),
108        })
109    );
110
111    // Add some interactivity modifiers
112    sciChartSurface.chartModifiers.add(
113        new ZoomPanModifier({ enableZoom: true }),
114        new MouseWheelZoomModifier(),
115        new ZoomExtentsModifier()
116    );
117
118    sciChartSurface.zoomExtents();
119
120    return { sciChartSurface, wasmContext };
121};
122