Simple Chart using Builder API

1import {
2    SciChartSurface,
3    ESeriesType,
4    EAxisType,
5    EAnimationType,
6    NumberRange,
7    EAnnotationType,
8    EHorizontalAnchorPoint,
9    EVerticalAnchorPoint,
10    ECoordinateMode,
11} from "scichart";
12import { chartBuilder } from "scichart";
13import { appTheme } from "../../theme";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16    // Create a chart using the Builder-API, an api that allows defining a chart
17    // with javascript-objects or JSON
18    return await chartBuilder.build2DChart(rootElement, {
19        // Set theme
20        surface: { theme: appTheme.SciChartJsTheme },
21        // Add xAxis
22        xAxes: { type: EAxisType.NumericAxis, options: { growBy: new NumberRange(0.1, 0.1) } },
23        // Add yAxis
24        yAxes: { type: EAxisType.NumericAxis, options: { growBy: new NumberRange(0.1, 0.1) } },
25        // Add series. More than one can be set in an array
26        series: [
27            {
28                // each series has type, options in the builder-API
29                type: ESeriesType.SplineLineSeries,
30                options: {
31                    strokeThickness: 5,
32                    interpolationPoints: 20,
33                    stroke: appTheme.VividTeal,
34                    animation: { type: EAnimationType.Scale, options: { duration: 500 } },
35                },
36                xyData: {
37                    xValues: [1, 3, 4, 7, 9],
38                    yValues: [10, 6, 7, 2, 16],
39                },
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: -26,
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 charts with JSON Objects",
64                    x1: 0.5,
65                    y1: 0.5,
66                    yCoordShift: 26,
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