React Chart Axis Layout Options
The same data is rendered many to show the Axis Layout options in SciChart.js. Charts support outer, inner, central and stacked axes, and use of axis alignment to create vertical charts. Series may be registered on specific X,Y axis pairs for infinite layout configuration.
drawExample.ts
index.tsx
theme.ts
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};
221Axis Layout Example - React
Overview
This example demonstrates the integration of SciChart.js within a React application using the <SciChartReact/> component. It showcases advanced axis layout options by configuring outer, inner, central, and stacked axes to achieve a highly customizable and dynamic chart.
Technical Implementation
The chart is initialized by passing an asynchronous function via the initChart prop on the <SciChartReact/> component, which creates and configures the SciChartSurface using JSON-based settings. Multiple axes are instantiated with various configurations such as flipped coordinates, custom axis alignment, stacked axis, inner axis, central axis and dynamic positioning using the Vertically Stacked Axis feature. Event subscriptions like axis.visibleRangeChanged are used to synchronize axis ranges across the chart. For more detailed guidance on initializing SciChart surfaces in React, refer to the Tutorial on Setting Up a Project with scichart-react.
Features and Capabilities
A Key feature is advanced customizations. The example binds unique data series to each axis pair with individually styled properties, and integrates interactive modifiers such as ZoomPanModifier, XAxisDragModifier, and YAxisDragModifier to enhance user interaction. These features guarantee high-performance rendering through WebGL and ensure that extensive diagnostic and performance tuning across axes is possible. Additional insights into performance optimizations can be found in Performance Optimisation of JavaScript Applications & Charts.
Integration and Best Practices
This implementation exemplifies robust React integration by leveraging React hooks along with the <SciChartReact/> component, thereby ensuring efficient lifecycle management and update synchronization. Developers are encouraged to explore best practices in React component optimization and state management as demonstrated in React Charts with SciChart.js. Furthermore, the example utilizes advanced custom axis layout techniques as detailed in the SciChart.js Axis Documentation and Advanced Layout Management. It also demonstrates best practices for performance using React hooks such as useMemo and useCallback, as described in Mastering useCallback and useMemo in React: A Deep Dive into Performance Optimization.
react Chart Examples & Demos
See Also: Chart Axis APIs (11 Demos)
React Chart with Multiple X Axes
Demonstrates Multiple X & Y Axis on a React Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
React Chart with Secondary Y Axes
Demonstrates Secondary Y Axis on a React Chart using SciChart.js. SciChart supports unlimited, multiple left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
React Vertical Charts
Demonstrates alignment of Axis to create a vertical chart with SciChart.js - JavaScript Charts.
React Chart with Central Axes
Demonstrates Central Axes on a React Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable layout
React Chart with Static X Axis
Demonstrates isStaticAxis on a React Chart using SciChart.js.
React Chart with Vertically Stacked Axes
Demonstrates Vertically Stacked Axes on a React Chart using SciChart.js, allowing data to overlap
React Chart with Logarithmic Axis Example
Demonstrates Logarithmic Axis on a React Chart using SciChart.js. SciChart supports logarithmic axis with scientific or engineering notation and positive and negative values
DiscontinuousDateAxis Comparison with React
React Chart with BaseValue Axes
Demonstrates BaseValue Axes on a React Chart using SciChart.js to create non-linear and custom-scaled axes
Draw React Chart Behind Axis
Demonstrates the option of the transparent Axes customization on a React Chart using SciChart.js.
Axis Types
Demonstrates how to use arbitrary text for axis labels, rather than formatted data values, using the new TextLabelProvider