React Chart with Reusable Templates using Shared Data

1import {
2    SciChartSurface,
3    chartBuilder,
4    ESeriesType,
5    ISciChart2DDefinition,
6    TSharedDataDefinition,
7    EAnnotationType,
8    ECoordinateMode,
9    EHorizontalAnchorPoint,
10    EVerticalAnchorPoint,
11} from "scichart";
12import { appTheme } from "../../theme";
13
14export const drawExample = async (rootElement: string | HTMLDivElement) => {
15    // Create a definition using dataIds
16    const chartTemplate: ISciChart2DDefinition = {
17        // Set theme
18        surface: { theme: appTheme.SciChartJsTheme },
19        // Set template of series without data and data Ids
20        series: [
21            {
22                type: ESeriesType.ColumnSeries,
23                options: { dataPointWidth: 0.5, fill: appTheme.VividSkyBlue + "77", stroke: appTheme.PaleSkyBlue },
24                xyData: { xDataId: "x", yDataId: "col" },
25            },
26            {
27                type: ESeriesType.LineSeries,
28                options: { stroke: appTheme.VividPink, strokeThickness: 3 },
29                xyData: { xDataId: "x", yDataId: "line" },
30            },
31            {
32                type: ESeriesType.SplineBandSeries,
33                options: {
34                    stroke: appTheme.VividOrange,
35                    strokeY1: appTheme.VividSkyBlue,
36                    fill: appTheme.VividOrange + "33",
37                    fillY1: appTheme.VividSkyBlue + "33",
38                },
39                xyyData: { xDataId: "x", yDataId: "col", y1DataId: "line" },
40            },
41        ],
42        // Add annotations
43        annotations: [
44            {
45                type: EAnnotationType.SVGTextAnnotation,
46                options: {
47                    text: "Builder API Demo",
48                    x1: 0.5,
49                    y1: 0.5,
50                    opacity: 0.33,
51                    yCoordShift: -52,
52                    xCoordinateMode: ECoordinateMode.Relative,
53                    yCoordinateMode: ECoordinateMode.Relative,
54                    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
55                    verticalAnchorPoint: EVerticalAnchorPoint.Center,
56                    fontSize: 36,
57                    fontWeight: "Bold",
58                },
59            },
60            {
61                type: EAnnotationType.SVGTextAnnotation,
62                options: {
63                    text: "Create SciChart templates with JSON Objects",
64                    x1: 0.5,
65                    y1: 0.5,
66                    yCoordShift: 0,
67                    opacity: 0.33,
68                    xCoordinateMode: ECoordinateMode.Relative,
69                    yCoordinateMode: ECoordinateMode.Relative,
70                    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
71                    verticalAnchorPoint: EVerticalAnchorPoint.Center,
72                    fontSize: 24,
73                    fontWeight: "Bold",
74                },
75            },
76        ],
77    };
78
79    // When you want to add data for the chart later
80    const sharedData: TSharedDataDefinition = { x: [1, 2, 3, 4, 5], col: [8, 2, 3, 7, 10], line: [10, 6, 7, 2, 16] };
81
82    // Build the chart by combining the definition and data
83    return await chartBuilder.build2DChart(rootElement, {
84        ...chartTemplate,
85        sharedData,
86    });
87};
88