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.tsx
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 with React
Overview
This example demonstrates how to implement rotated axis labels within a React application using SciChart.js. It focuses on configuring the primary axes with customized label formatting, rotation, and alignment to provide better readability and space utilization. The rotating of the X-Axis labels to 90 degrees enables the display of more labels without overlapping, which is particularly useful when working with date-based data.
Technical Implementation
The example initializes the SciChartSurface asynchronously using the React component <SciChartReact/>. The chart is set up with a NumericAxis for both the X and Y axes. The X-Axis is configured with axis.rotation set to 90 degrees and a custom date format axis.labelFormat set to ENumericFormat.Date_DDMMYYYY to support date-based values. Data is generated to simulate a time series and is rendered using a SplineMountainRenderableSeries with gradient fill and a wave animation effect. Developers interested in how to implement rotated labels can refer to the Rotating Axis Labels documentation for more details.
Features and Capabilities
This example highlights several advanced features of SciChart.js in a React context, including:
- Axis Label Rotation and Alignment: Customization of axis labels for improved layout.
- Gradient Fills and Animations: The use of a gradient linear fill combined with a wave animation that enhances visual appeal.
- Dynamic Data Generation: Demonstrating how to simulate time-series data for a mountain chart. The mountain series implementation can be explored further in the JavaScript Mountain Area Chart example.
Integration and Best Practices
The integration leverages the <SciChartReact/> component, which simplifies embedding high-performance charts into a React application. The asynchronous initialization using async/await ensures that the WebAssembly context is properly handled, as detailed in the Getting Started with SciChart JS guide. For optimal performance and resource management, the example also demonstrates best practices for cleaning up the SciChartSurface. Developers can learn more about efficient component integration from the article React Charts with SciChart.js: Introducing “SciChart React”.
For further reading on configuring the NumericAxis and tick customization, visit the Numeric Axis documentation.
react 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