React Chart Axis Layout Options

1import { appTheme } from "../../../theme";
2
3import {
4    EAutoRange,
5    EAxisAlignment,
6    EInnerAxisPlacementCoordinateMode,
7    ELabelAlignment,
8    FastLineRenderableSeries,
9    INumericAxisOptions,
10    NumberRange,
11    NumericAxis,
12    SciChartSurface,
13    XAxisDragModifier,
14    XyDataSeries,
15    YAxisDragModifier,
16    ZoomPanModifier,
17    RightAlignedOuterVerticallyStackedAxisLayoutStrategy,
18} from "scichart";
19
20export const drawExample = async (rootElement: string | HTMLDivElement) => {
21    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
22        theme: appTheme.SciChartJsTheme,
23    });
24
25    const commonAxisOptions: INumericAxisOptions = {
26        drawMajorBands: false,
27        drawMajorGridLines: false,
28        drawMinorGridLines: false,
29        drawMajorTickLines: true,
30        autoRange: EAutoRange.Never,
31        axisTitleStyle: {
32            fontSize: 18,
33        },
34        majorTickLineStyle: {
35            tickSize: 6,
36            strokeThickness: 2,
37            color: "white",
38        },
39        axisBorder: {
40            border: 2,
41            color: "white",
42        },
43        labelStyle: {
44            fontSize: 14,
45        },
46    };
47
48    const horizontalAxisPosition = 60;
49    const verticalAxisPosition = 30;
50
51    const primaryColors = ["#4FBEE6", "#AD3D8D", "#6BBDAE", "#E76E63", "#2C4B92"];
52
53    const xAxis1 = new NumericAxis(wasmContext, { ...commonAxisOptions, id: "xAxis1", axisTitle: "X Axis" });
54    const xAxis2 = new NumericAxis(wasmContext, {
55        ...commonAxisOptions,
56        id: "xAxis2",
57        axisTitle: "Flipped X Axis",
58        flippedCoordinates: true,
59    });
60    const xAxis3 = new NumericAxis(wasmContext, {
61        ...commonAxisOptions,
62        id: "xAxis3",
63        axisTitle: "Stacked X Axis",
64        axisAlignment: EAxisAlignment.Right,
65        flippedCoordinates: false,
66    });
67    const xAxis4 = new NumericAxis(wasmContext, {
68        ...commonAxisOptions,
69        id: "xAxis4",
70        // axisTitle: "TopInnerXAxis",
71        axisAlignment: EAxisAlignment.Top,
72
73        isInnerAxis: true,
74    });
75
76    const yAxis2 = new NumericAxis(wasmContext, { ...commonAxisOptions, id: "yAxis1", axisTitle: "Stacked Y Axis" });
77    const yAxis1 = new NumericAxis(wasmContext, {
78        ...commonAxisOptions,
79        id: "yAxis2",
80        axisTitle: "Flipped Y Axis - Left Aligned",
81        axisAlignment: EAxisAlignment.Left,
82        flippedCoordinates: true,
83    });
84    const yAxis3 = new NumericAxis(wasmContext, {
85        ...commonAxisOptions,
86        id: "yAxis3",
87        axisTitle: "Y Axis - Top Aligned",
88        axisAlignment: EAxisAlignment.Top,
89        flippedCoordinates: false,
90    });
91    const yAxis4 = new NumericAxis(wasmContext, {
92        ...commonAxisOptions,
93        id: "yAxis4",
94        // axisTitle: "InnerYAxis",
95        flippedCoordinates: false,
96        isInnerAxis: true,
97    });
98
99    sciChartSurface.layoutManager.rightOuterAxesLayoutStrategy =
100        new RightAlignedOuterVerticallyStackedAxisLayoutStrategy();
101
102    // use axes with custom ids for positioning the central axes
103    sciChartSurface.layoutManager.rightInnerAxesLayoutStrategy.orthogonalAxisId = xAxis1.id;
104    sciChartSurface.layoutManager.bottomInnerAxesLayoutStrategy.orthogonalAxisId = yAxis1.id;
105    sciChartSurface.layoutManager.leftInnerAxesLayoutStrategy.orthogonalAxisId = xAxis1.id;
106    sciChartSurface.layoutManager.topInnerAxesLayoutStrategy.orthogonalAxisId = yAxis1.id;
107
108    sciChartSurface.layoutManager.rightInnerAxesLayoutStrategy.coordinateMode =
109        EInnerAxisPlacementCoordinateMode.DataValue;
110
111    sciChartSurface.layoutManager.rightInnerAxesLayoutStrategy.axisPosition = verticalAxisPosition;
112
113    sciChartSurface.layoutManager.topInnerAxesLayoutStrategy.coordinateMode =
114        EInnerAxisPlacementCoordinateMode.DataValue;
115    sciChartSurface.layoutManager.topInnerAxesLayoutStrategy.axisPosition = horizontalAxisPosition;
116
117    xAxis1.drawMajorGridLines = true;
118    yAxis1.drawMajorGridLines = true;
119
120    sciChartSurface.xAxes.add(xAxis2, xAxis3, xAxis1, xAxis4);
121
122    sciChartSurface.yAxes.add(yAxis2, yAxis3, yAxis1, yAxis4);
123    xAxis1.isPrimaryAxis = true;
124    yAxis1.isPrimaryAxis = true;
125
126    sciChartSurface.xAxes.asArray().forEach((xAxis, index) => {
127        const yAxis = sciChartSurface.yAxes.get(index);
128
129        xAxis.axisTitleStyle.color = primaryColors[index];
130        yAxis.axisTitleStyle.color = primaryColors[index];
131
132        xAxis.majorTickLineStyle = { color: primaryColors[index] };
133        yAxis.majorTickLineStyle = { color: primaryColors[index] };
134
135        xAxis.labelStyle.color = primaryColors[index];
136        yAxis.labelStyle.color = primaryColors[index];
137
138        xAxis.axisBorder.borderTop = 2;
139        xAxis.axisBorder.borderBottom = 2;
140        xAxis.axisBorder.borderRight = 2;
141        xAxis.axisBorder.borderLeft = 2;
142        xAxis.axisBorder.color = primaryColors[index];
143
144        yAxis.axisBorder.borderTop = 2;
145        yAxis.axisBorder.borderBottom = 2;
146        yAxis.axisBorder.borderRight = 2;
147        yAxis.axisBorder.borderLeft = 2;
148        yAxis.axisBorder.color = primaryColors[index];
149
150        xAxis.labelStyle.alignment = ELabelAlignment.Center;
151        yAxis.labelStyle.alignment = ELabelAlignment.Center;
152
153        xAxis.axisRenderer.keepLabelsWithinAxis = true;
154        yAxis.axisRenderer.keepLabelsWithinAxis = true;
155
156        xAxis.visibleRange = new NumberRange(-10, 110);
157        yAxis.visibleRange = new NumberRange(-10, 140);
158
159        const dataSeries = new XyDataSeries(wasmContext, { containsNaN: false, isSorted: true });
160        for (let i = 0; i < 100; i++) {
161            const y = Math.sin(i * 0.1) * i + 50;
162
163            dataSeries.append(i, y);
164        }
165        const lineSeries = new FastLineRenderableSeries(wasmContext, {
166            dataSeries,
167            xAxisId: xAxis.id,
168            yAxisId: yAxis.id,
169            strokeThickness: 3,
170            stroke: primaryColors[index],
171        });
172        sciChartSurface.renderableSeries.add(lineSeries);
173    });
174
175    // leave only one border for Inner Axes
176    xAxis4.axisBorder.borderRight = 0;
177    xAxis4.axisBorder.borderBottom = 0;
178    xAxis4.axisBorder.borderLeft = 0;
179
180    yAxis4.axisBorder.borderTop = 0;
181    yAxis4.axisBorder.borderBottom = 0;
182    yAxis4.axisBorder.borderLeft = 0;
183
184    sciChartSurface.chartModifiers.add(
185        new ZoomPanModifier({
186            includedXAxisIds: [xAxis1.id, xAxis4.id],
187            includedYAxisIds: [yAxis1.id, yAxis4.id],
188        }),
189        new XAxisDragModifier(),
190        new YAxisDragModifier()
191    );
192
193    const series4ScaleFactor = 3;
194    console.log(" xAxis1.visibleRange", xAxis1.visibleRange);
195    console.log(" yAxis1.visibleRange", yAxis1.visibleRange);
196    xAxis4.visibleRange = new NumberRange(
197        (xAxis1.visibleRange.min - verticalAxisPosition) * series4ScaleFactor,
198        (xAxis1.visibleRange.max - verticalAxisPosition) * series4ScaleFactor
199    );
200    yAxis4.visibleRange = new NumberRange(
201        (horizontalAxisPosition - yAxis1.visibleRange.max) * series4ScaleFactor,
202        (horizontalAxisPosition - yAxis1.visibleRange.min) * series4ScaleFactor
203    );
204
205    xAxis2.visibleRangeChanged.subscribe((data) => {
206        xAxis3.visibleRange = data.visibleRange;
207    });
208    yAxis2.visibleRangeChanged.subscribe((data) => {
209        yAxis3.visibleRange = data.visibleRange;
210    });
211
212    xAxis3.visibleRangeChanged.subscribe((data) => {
213        xAxis2.visibleRange = data.visibleRange;
214    });
215    yAxis3.visibleRangeChanged.subscribe((data) => {
216        yAxis2.visibleRange = data.visibleRange;
217    });
218
219    return { sciChartSurface, wasmContext };
220};
221