Rotated Axis Labels and Alignment
Demonstrates how to use Rotation and Alignment of Axis Labels with SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
theme.ts
1import {
2 XyDataSeries,
3 NumericAxis,
4 WaveAnimation,
5 SciChartSurface,
6 GradientParams,
7 Point,
8 SplineMountainRenderableSeries,
9 ENumericFormat,
10} from "scichart";
11import { appTheme } from "../../../theme";
12
13export const drawExample = async (rootElement: string | HTMLDivElement) => {
14 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
15 theme: appTheme.SciChartJsTheme,
16 });
17
18 // Add an X Axis
19 const xAxis = new NumericAxis(wasmContext, {
20 axisTitle: "X Axis with Rotated Labels",
21 labelFormat: ENumericFormat.Date_DDMMYYYY,
22 labelStyle: {
23 fontSize: 16,
24 },
25 // Rotation is in degrees clockwise
26 rotation: 90,
27 // Turn up the number of major ticks (default is 10)
28 maxAutoTicks: 30,
29 // Turn off minor gridlines, since majors are now closer together
30 drawMinorGridLines: false,
31 });
32 sciChartSurface.xAxes.add(xAxis);
33
34 // Add a Y Axis
35 const yAxis = new NumericAxis(wasmContext, { axisTitle: "Y Axis", labelStyle: { fontSize: 16 } });
36 sciChartSurface.yAxes.add(yAxis);
37
38 // Generate some data
39 const startTime = new Date(2020, 0, 1).getTime() / 1000;
40 let y = 110;
41 const xValues: number[] = [];
42 const yValues: number[] = [];
43 for (let i = 0; i < 50; i++) {
44 const x = startTime + i * 24 * 60 * 60;
45 y = y + 10 * (Math.random() - 0.8);
46 xValues.push(x);
47 yValues.push(y);
48 }
49
50 // Add a Spline Mountain series
51 const mountainSeries = new SplineMountainRenderableSeries(wasmContext, {
52 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
53 stroke: appTheme.VividSkyBlue,
54 strokeThickness: 3,
55 zeroLineY: 0.0,
56 fill: "rgba(176, 196, 222, 0.7)", // when a solid color is required, use fill
57 // when a gradient is required, use fillLinearGradient
58 fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
59 { color: appTheme.VividTeal + "77", offset: 0 },
60 { color: "Transparent", offset: 1 },
61 ]),
62 animation: new WaveAnimation({ duration: 1000, fadeEffect: true, zeroLine: 0 }),
63 });
64 sciChartSurface.renderableSeries.add(mountainSeries);
65
66 return { sciChartSurface, wasmContext };
67};
68Rotated Axis Labels and Alignment in JavaScript
Overview
This example demonstrates how to customize and rotate axis labels using SciChart.js in a pure JavaScript setting. The main objective is to rotate the X-Axis labels by 90 degrees and apply custom date formatting, which allows more labels to be displayed without overlap when visualizing time series data.
Technical Implementation
The chart is asynchronously initialized by creating a SciChartSurface along with its WebAssembly context. A NumericAxis is configured for the X-Axis with properties such as axis.labelFormat (using the date format ENumericFormat.Date_DDMMYYYY), increased tick counts, and a axis.rotation value set to 90 degrees. Dynamic time series data is generated and rendered using a SplineMountainRenderableSeries that incorporates both gradient fills and a wave animation effect. Developers looking for advanced axis customization can refer to the Rotating Axis Labels documentation, while additional details about date formatting are available in The DateTimeNumericAxis guide.
Features and Capabilities
The implementation highlights several advanced features, including real-time chart updates due to dynamic data generation, visually appealing gradient fills, and smooth transition animations provided by the wave animation effect. For more insights into how such spline mountain charts are constructed, you can review the JavaScript Spline Mountain Area Chart documentation.
Integration and Best Practices
In this JavaScript example, the asynchronous initialization not only enhances performance through WebAssembly integration but also ensures proper resource management. A destructor function is provided to clean up the SciChartSurface when the chart is no longer needed, aligning with best practices detailed in Getting Started with SciChart JS. Moreover, developers interested in configuring animation effects will benefit from the Animations API, which explains how to fine-tune parameters such as duration and fade effects for an optimal display.
javascript Chart Examples & Demos
See Also: Axis Label Customization (3 Demos)
Multi-line and Rotated Chart Text labels
Demonstrates how to use arbitrary text for axis labels, rather than formatted data values, using the new TextLabelProvider
Chart Axis Image labels
Demonstrates how to use Images as Axis Labels
Custom High Precision Date Labels
Demonstrates how to use date-fns and custom logic to format High Precision Date Axes in SciChart.js