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.

Fullscreen

Edit

Docs

drawExample.ts

angular.ts

theme.ts

Copy to clipboard

Minimise

Fullscreen

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

AxisLayout Example - Angular

Overview

This example illustrates advanced axis layout customization using SciChart.js within the Angular framework. It demonstrates the configuration of outer, inner, central, flipped and stacked axes, while enabling dynamic chart updates.

Technical Implementation

The implementation is encapsulated in an Angular standalone component that leverages the scichart-angular package for seamless integration with Angular’s dependency injection and lifecycle hooks. The chart is initialized via the SciChartSurface.create() function and axes are instantiated using direct API calls from SciChart.js. The layout is fine-tuned using strategies such as the Vertically Stacked Axis feature and is further enhanced by subscribing to events like axis.visibleRangeChanged for synchronized axis updates. Developers can explore more about chart initialization in Getting Started with SciChart JS.

Features and Capabilities

The example presents a rich set of features including real-time update capabilities, custom axis styling, and interactive modifiers such as ZoomPanModifier, XAxisDragModifier, and YAxisDragModifier. Each axis instance is uniquely configured with custom borders, tick styles, and label alignments to demonstrate the flexibility of SciChart.js. Advanced axis customization is discussed in detail in the SciChart.js Axis Documentation, which outlines effective techniques for managing inner and stacked axes.

Integration and Best Practices

By leveraging Angular’s dependency injection and lifecycle management (see Component Lifecycle), the example adheres to best practices for integrating external libraries into an Angular project. This approach ensures optimal performance and maintainability, allowing developers to build scalable, high-performance applications with dynamic WebGL-rendered charts.

angular Chart Examples & Demos

Angular Chart with Multiple X Axes

Demonstrates Multiple X & Y Axis on a Angular Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning

Angular Chart with Secondary Y Axes

Demonstrates Secondary Y Axis on a Angular Chart using SciChart.js. SciChart supports unlimited, multiple left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning

Angular Vertical Charts

Demonstrates alignment of Axis to create a vertical chart with SciChart.js - JavaScript Charts.

Angular Chart with Central Axes

Demonstrates Central Axes on a Angular Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable layout

Angular Chart with Static X Axis

Demonstrates isStaticAxis on a Angular Chart using SciChart.js.

Angular Chart with Vertically Stacked Axes

Demonstrates Vertically Stacked Axes on a Angular Chart using SciChart.js, allowing data to overlap

Angular Chart with Logarithmic Axis Example

Demonstrates Logarithmic Axis on a Angular Chart using SciChart.js. SciChart supports logarithmic axis with scientific or engineering notation and positive and negative values

NEW!