Axis labels in React 3D Chart control
10 Jan 202424 minutes to read
Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis.
Smart axis labels
When the axis labels overlap with each other, labelIntersectAction property in the axis can be used to place them smartly.
Case 1: When setting labelIntersectAction as Hide.
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Case 2: When setting labelIntersectAction as Rotate45.
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Case 3: When setting labelIntersectAction as Rotate90.
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Edge label placement
Labels with long text at the edges of an axis may appear partially in the 3D chart. To avoid this,
use the edgeLabelPlacement property in axis, which moves the label inside the chart area for better appearance or hides it.
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: "South Korea", y: 39.4 },
{ x: "India", y: 61.3 },
{ x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 },
{ x: "Australia", y: 15.8 },
{ x: "Italy", y: 29.2 },
{ x: "United Kingdom", y: 44.6 },
{ x: "Saudi Arabia", y: 9.7 },
{ x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 },
{ x: "Brazil", y: 75.9 },
{ x: "China", y: 51.4 }
];
return <Chart3DComponent id='charts' style=
primaryXAxis=
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Maximum labels
The labels will be rendered based on the count in the maximumLabels property per 100 pixel. If the range (minimum, maximum, interval) and maximumLabels are set, then the priority goes to range. If the range is not set, then the priority goes to maximumLabels property.
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
var series1 = [];
var value = 80;
for (var i = 1; i < 50; i++) {
if (Math.random() > .5) {
value += (1 + Math.random()*10);
} else {
value -= (1 + Math.random()*10);
}
series1.push( { x: i, y: value.toFixed(1) });
}
const xAxis = {
title: 'Years', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, maximumLabels: 1
}
return <Chart3DComponent id='charts'
primaryXAxis = {xAxis}
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={series1} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Legend3D, DataLabel3D, Category3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
export let series1: Object[] = [];
export let value = 80;
function App() {
for (var i = 1; i < 50; i++) {
if (Math.random() > .5) {
value += (1 + Math.random()*10);
} else {
value -= (1 + Math.random()*10);
}
series1.push( { x: i, y: value.toFixed(1) });
}
const xAxis = {
title: 'Years', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, maximumLabels: 1
}
return <Chart3DComponent id='charts'
primaryXAxis = {xAxis}
wallColor='transparent'
enableRotation={true} rotation={7} tilt={10} depth={100}>
<Inject services={[ColumnSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
<Chart3DSeriesCollectionDirective >
<Chart3DSeriesDirective dataSource={series1} xName='x' yName='y' type='Column'>
</Chart3DSeriesDirective>
</Chart3DSeriesCollectionDirective>
</Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));