React Column Chart

1import { appTheme } from "../../../theme";
2import {
3    NumericAxis,
4    FastColumnRenderableSeries,
5    XyDataSeries,
6    ZoomPanModifier,
7    ZoomExtentsModifier,
8    MouseWheelZoomModifier,
9    SciChartSurface,
10    NumberRange,
11    WaveAnimation,
12    GradientParams,
13    Point,
14    EHorizontalTextPosition,
15    EVerticalTextPosition,
16    PaletteFactory,
17    Thickness,
18} from "scichart";
19
20export const drawExample = async (rootElement: string | HTMLDivElement) => {
21    // Create a SciChartSurface
22    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
23        theme: appTheme.SciChartJsTheme,
24    });
25
26    // Add an X, Y Axis
27    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
28        labelPrecision: 0,
29    }));
30    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { 
31        growBy: new NumberRange(0, 0.1),
32        labelPrecision: 0
33    }));
34
35    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
36    const yValues = [1, 2, 4, 8, 11, 15, 24, 46, 81, 117, 144, 160, 137, 101, 64, 35, 25, 14, 4, 1];
37
38    // Create an add a column series
39    sciChartSurface.renderableSeries.add(
40        new FastColumnRenderableSeries(wasmContext, {
41            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
42            // Fill & stroke support Hex strings and rgba()
43            fill: appTheme.PaleSkyBlue + "77",
44            stroke: appTheme.PaleSkyBlue,
45            strokeThickness: 2,
46            dataPointWidth: 0.7,
47            cornerRadius: 8,
48            // Optional datalabels on series. To enable set a style and position
49            dataLabels: {
50                horizontalTextPosition: EHorizontalTextPosition.Center,
51                verticalTextPosition: EVerticalTextPosition.Above,
52                style: { fontFamily: "Arial", fontSize: 16, padding: new Thickness(0, 0, 8, 0) },
53                color: appTheme.ForegroundColor,
54                precision: 0
55            },
56            // Optional series animation executed when series shows
57            animation: new WaveAnimation({ duration: 1000 }),
58            // Horizontal gradient in X. For Y gradient choose fillLinearGradient property
59            paletteProvider: PaletteFactory.createGradient(
60                wasmContext,
61                new GradientParams(new Point(0, 0), new Point(1, 1), [
62                    { offset: 0, color: appTheme.VividOrange },
63                    { offset: 0.67, color: appTheme.VividSkyBlue },
64                    { offset: 1.0, color: appTheme.VividTeal },
65                ]),
66                { enableFill: true }
67            ),
68        })
69    );
70
71    // Optional: Add some interactivity modifiers
72    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
73    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
74    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
75
76    sciChartSurface.zoomExtents();
77
78    return { sciChartSurface, wasmContext };
79};
80