React Chart Annotation Layers

1import { appTheme } from "../../../theme";
2import {
3    SciChartSurface,
4    NumericAxis,
5    NumberRange,
6    ZoomPanModifier,
7    BoxAnnotation,
8    TextAnnotation,
9    ECoordinateMode,
10    EAnnotationLayer,
11    NativeTextAnnotation,
12    MouseWheelZoomModifier,
13    PinchZoomModifier,
14    Thickness,
15    XyDataSeries,
16    ZoomExtentsModifier,
17    FastLineRenderableSeries,
18    EllipsePointMarker,
19    EVerticalAnchorPoint,
20} from "scichart";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
24        theme: appTheme.SciChartJsTheme,
25    });
26
27    const xAxis = new NumericAxis(wasmContext);
28    const yAxis = new NumericAxis(wasmContext);
29
30    sciChartSurface.xAxes.add(xAxis);
31    sciChartSurface.yAxes.add(yAxis);
32
33    xAxis.majorGridLineStyle.strokeThickness = 3;
34    xAxis.drawMinorGridLines = false;
35    xAxis.growBy = new NumberRange(0.2, 0.2);
36    yAxis.majorGridLineStyle.strokeThickness = 3;
37    yAxis.drawMinorGridLines = false;
38    yAxis.growBy = new NumberRange(0.4, 0.4);
39
40    const dataSeries = new XyDataSeries(wasmContext, { xValues: [1, 4, 5, 7], yValues: [2, 6, 9, 3] });
41
42    const lineSeries = new FastLineRenderableSeries(wasmContext, {
43        dataSeries,
44        stroke: "#4682b4",
45        strokeThickness: 7,
46        pointMarker: new EllipsePointMarker(wasmContext, { width: 10, height: 10, fill: appTheme.VividOrange }),
47        dataLabels: {
48            style: {
49                fontFamily: "Arial",
50                fontSize: 20,
51            },
52
53            color: appTheme.VividOrange,
54        },
55    });
56    sciChartSurface.renderableSeries.add(lineSeries);
57
58    sciChartSurface.chartModifiers.add(
59        new ZoomPanModifier({ enableZoom: true }),
60        new ZoomExtentsModifier(),
61        new MouseWheelZoomModifier()
62    );
63
64    const backgroundBoxAnnotation = new BoxAnnotation({
65        annotationLayer: EAnnotationLayer.Background,
66        stroke: appTheme.VividTeal,
67        strokeThickness: 1,
68        fill: appTheme.MutedTeal,
69        x1: 4,
70        x2: 5.6,
71        y1: 10,
72        y2: 6.2,
73        isEditable: true,
74    });
75
76    const boxAnnotationBelowSeries = new BoxAnnotation({
77        annotationLayer: EAnnotationLayer.BelowChart,
78        stroke: appTheme.VividOrange,
79        strokeThickness: 3,
80        fill: appTheme.MutedOrange,
81        x1: 3.2,
82        x2: 4.8,
83        y1: 8,
84        y2: 4.2,
85        isEditable: true,
86    });
87
88    const boxAnnotationAboveSeries = new BoxAnnotation({
89        annotationLayer: EAnnotationLayer.AboveChart, // default
90        stroke: appTheme.VividSkyBlue,
91        strokeThickness: 3,
92        fill: appTheme.MutedSkyBlue,
93        x1: 2.5,
94        x2: 4.2,
95        y1: 5.2,
96        y2: 1.5,
97        isEditable: true,
98    });
99
100    const backgroundTextAnnotation = new TextAnnotation({
101        annotationLayer: EAnnotationLayer.Background,
102        id: "textAnnotationBackground",
103        x1: 0.5,
104        y1: 11,
105        textColor: "#F1B24A",
106        fontSize: 32,
107        text: "Background SVG Annotation",
108        background: appTheme.VividPurple,
109        padding: Thickness.fromString("1 5 5 5"),
110        isEditable: true,
111    });
112
113    const foregroundTextAnnotation = new TextAnnotation({
114        annotationLayer: EAnnotationLayer.AboveChart,
115        id: "foregroundTextAnnotation",
116        x1: 0.5,
117        y1: 4,
118        textColor: "#F1B24A",
119        fontSize: 32,
120        fontFamily: "Times New Roman",
121        text: "Foreground SVG Annotation",
122        background: appTheme.VividRed,
123        padding: Thickness.fromString("1 5 5 5"),
124        isEditable: true,
125    });
126
127    const backgroundNativeTextAnnotation = new NativeTextAnnotation({
128        annotationLayer: EAnnotationLayer.Background,
129        x1: backgroundBoxAnnotation.x1,
130        y1: backgroundBoxAnnotation.y1,
131        textColor: appTheme.DarkIndigo,
132        fontSize: 20,
133        fontFamily: "Arial",
134        text: "Background",
135    });
136    const nativeTextAnnotationBelowSeries = new NativeTextAnnotation({
137        annotationLayer: EAnnotationLayer.BelowChart,
138        x1: boxAnnotationBelowSeries.x1,
139        y1: boxAnnotationBelowSeries.y1,
140        textColor: appTheme.DarkIndigo,
141        fontSize: 20,
142        fontFamily: "Arial",
143        text: "Below Chart",
144    });
145
146    const foregroundNativeTextAnnotation = new NativeTextAnnotation({
147        annotationLayer: EAnnotationLayer.AboveChart,
148        x1: boxAnnotationAboveSeries.x1,
149        y1: boxAnnotationAboveSeries.y1,
150        textColor: appTheme.DarkIndigo,
151        fontSize: 20,
152        fontFamily: "Arial",
153        text: "Above Chart",
154    });
155
156    sciChartSurface.preRender.subscribe(() => {
157        backgroundNativeTextAnnotation.x1 = backgroundBoxAnnotation.x1;
158        backgroundNativeTextAnnotation.y1 = backgroundBoxAnnotation.y1;
159        nativeTextAnnotationBelowSeries.x1 = boxAnnotationBelowSeries.x1;
160        nativeTextAnnotationBelowSeries.y1 = boxAnnotationBelowSeries.y1;
161        foregroundNativeTextAnnotation.x1 = boxAnnotationAboveSeries.x1;
162        foregroundNativeTextAnnotation.y1 = boxAnnotationAboveSeries.y1;
163    });
164
165    sciChartSurface.annotations.add(
166        boxAnnotationAboveSeries,
167        boxAnnotationBelowSeries,
168        backgroundBoxAnnotation,
169        backgroundTextAnnotation,
170        foregroundTextAnnotation,
171        foregroundNativeTextAnnotation,
172        nativeTextAnnotationBelowSeries,
173        backgroundNativeTextAnnotation
174    );
175
176    return { sciChartSurface };
177};
178