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