JavaScript 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.html
vanilla.ts
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 in JavaScript
Overview
This example demonstrates how to create a high-performance chart using SciChart.js with JavaScript. The "Axis Layout" example showcases the flexibility of advanced axis layout options in SciChart, such as customized styling, inner axis placement, and complex layout strategies to manage horizontal and vertical axes effectively.
Technical Implementation
The chart is created asynchronously by calling an async function that initializes a SciChartSurface on a provided HTMLDivElement. Multiple NumericAxes are defined with common styling options such as grid line and tick customization, with each axis configured individually. axis.visibleRange synchronization is achieved by subscribing to visibleRangeChanged events, ensuring that paired axes remain in sync. For more details on synchronizing axes, refer to the Synchronizing Multiple Charts documentation. Data is plotted using the FastLineRenderableSeries and XyDataSeries types; these components are optimized for performance even with large datasets, as described in the Performance Tips & Tricks guide.
Features and Capabilities
The example includes several advanced features such as inner axis layout, flipped axis, central axis and stacked axis. Inner axis, central axis and advanced layout options can be found in the SciChart.js Documentation, the section titled "Multi Axis and Layout". In addition, a right-aligned vertically stacked axis layout strategy is employed through the RightAlignedOuterVerticallyStackedAxisLayoutStrategy, details of which are provided in the Vertically Stacked Axis Layout documentation. Interactive chart modifiers such as ZoomPanModifier, XAxisDragModifier, and YAxisDragModifier are added to enable zooming, panning, and dragging interactions. You can learn more about these modifiers in their respective XAxisDragModifier and ZoomPanModifier pages.
Integration and Best Practices
The example is written in plain JavaScript without relying on frameworks, although additional files demonstrate integration with Angular and React. Resource management is handled by calling the sciChartSurface.delete() method when the chart is no longer needed, following best practices as outlined in the Memory Best Practices documentation. Asynchronous initialization using promises is critical in this project to ensure that all chart components are loaded correctly. Customization of axis borders and styles is implemented with configuration options detailed in the Axis Borders and Background guide. For further guidance on integrating SciChart.js in a non-framework project, see the Getting Started with SciChart JS documentation.
javascript Chart Examples & Demos
See Also: Chart Axis APIs (11 Demos)
JavaScript Chart with Multiple X Axes
Demonstrates Multiple X & Y Axis on a JavaScript Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
JavaScript Chart with Secondary Y Axes
Demonstrates Secondary Y Axis on a JavaScript Chart using SciChart.js. SciChart supports unlimited, multiple left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
JavaScript Vertical Charts
Demonstrates alignment of Axis to create a vertical chart with SciChart.js - JavaScript Charts.
JavaScript Chart with Central Axes
Demonstrates Central Axes on a JavaScript Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable layout
JavaScript Chart with Static X Axis
Demonstrates isStaticAxis on a JavaScript Chart using SciChart.js.
JavaScript Chart with Vertically Stacked Axes
Demonstrates Vertically Stacked Axes on a JavaScript Chart using SciChart.js, allowing data to overlap
JavaScript Chart with Logarithmic Axis Example
Demonstrates Logarithmic Axis on a JavaScript Chart using SciChart.js. SciChart supports logarithmic axis with scientific or engineering notation and positive and negative values
DiscontinuousDateAxis Comparison with Javascript
JavaScript Chart with BaseValue Axes
Demonstrates BaseValue Axes on a JavaScript Chart using SciChart.js to create non-linear and custom-scaled axes such as log-like scales
Draw JavaScript Chart Behind Axis
Demonstrates the option of the transparent Axes customization on a JavaScript Chart using SciChart.js.
Axis Types
Demonstrates how to use arbitrary text for axis labels, rather than formatted data values, using the new TextLabelProvider