Axis labels in EJ2 TypeScript 3D Chart control

10 Jan 202418 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.

index.ts
index.html
import {Chart3D, Category3D, Legend3D, ColumnSeries3D, Tooltip3D, Highlight3D } from '@syncfusion/ej2-charts';
Chart3D.Inject(ColumnSeries3D, Category3D, Legend3D, Tooltip3D, Highlight3D);

let chartData: any[] = [
    { 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 }
];

let chart: Chart3D = new Chart3D({
    primaryXAxis: {
        valueType: 'Category',
        labelIntersectAction: 'Hide'
    },
    series: [
        {
            type: 'Column', xName: 'x', yName: 'y',
            dataSource: chartData
        }
    ],
    wallColor: 'transparent',
    enableRotation: true,
    rotation: 7,
    tilt: 10,
    depth: 100
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Case 2: When setting labelIntersectAction as Rotate45.

index.ts
index.html
import {Chart3D, Category3D, Legend3D, ColumnSeries3D, Tooltip3D, Highlight3D } from '@syncfusion/ej2-charts';
Chart3D.Inject(ColumnSeries3D, Category3D, Legend3D, Tooltip3D, Highlight3D);

let chartData: any[] = [
    { 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 }
];

let chart: Chart3D = new Chart3D({
    primaryXAxis: {
        valueType: 'Category',
        labelIntersectAction: 'Rotate45'
    },
    series: [
        {
            type: 'Column', xName: 'x', yName: 'y',
            dataSource: chartData
        }
    ],
    wallColor: 'transparent',
    enableRotation: true,
    rotation: 7,
    tilt: 10,
    depth: 100
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Case 3: When setting labelIntersectAction as Rotate90.

index.ts
index.html
import {Chart3D, Category3D, Legend3D, ColumnSeries3D, Tooltip3D, Highlight3D } from '@syncfusion/ej2-charts';
Chart3D.Inject(ColumnSeries3D, Category3D, Legend3D, Tooltip3D, Highlight3D);

let chartData: any[] = [
    { 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 }
];

let chart: Chart3D = new Chart3D({
    primaryXAxis: {
        valueType: 'Category',
        labelIntersectAction: 'Rotate90'
    },
    series: [
        {
            type: 'Column', xName: 'x', yName: 'y',
            dataSource: chartData
        }
    ],
    wallColor: 'transparent',
    enableRotation: true,
    rotation: 7,
    tilt: 10,
    depth: 100
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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.

index.ts
index.html
import {Chart3D, Category3D, Legend3D, ColumnSeries3D, Tooltip3D, Highlight3D } from '@syncfusion/ej2-charts';
Chart3D.Inject(ColumnSeries3D, Category3D, Legend3D, Tooltip3D, Highlight3D);

let chartData: any[] = [
    { country: "USA", gold: 50, silver: 70, bronze: 45 },
    { country: "China", gold: 40, silver: 60, bronze: 55 },
    { country: "Japan", gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France", gold: 50, silver: 45, bronze: 35 },
    { country: "Germany", gold: 40, silver: 30, bronze: 22 },
    { country: "Italy", gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];

let chart: Chart3D = new Chart3D({
    primaryXAxis: {
        valueType: 'Category',
        edgeLabelPlacement: 'Shift',
    },
    series: [
        {
            type: 'Column', xName: 'country', yName: 'gold',
            dataSource: chartData
        }
    ],
    wallColor: 'transparent',
    enableRotation: true,
    rotation: 7,
    tilt: 10,
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

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.

index.ts
index.html
import {Chart3D, Category3D, Legend3D, ColumnSeries3D, Tooltip3D, Highlight3D, I3DAxisLabelRenderEventArgs } from '@syncfusion/ej2-charts';
Chart3D.Inject(ColumnSeries3D, Category3D, Legend3D, Tooltip3D, Highlight3D);

let series1: Object[] = [];
let point1: Object;
let value: number = 80;
let i: number;
for (i = 1; i < 50; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: i, y: value.toFixed(1) };
    series1.push(point1);
}

let chart: Chart3D = new Chart3D({
    primaryXAxis: {
        title: 'Years',
        edgeLabelPlacement: 'Shift',
        majorGridLines: { width: 0 },
        maximumLabels: 1,
    },

    //Initializing Primary Y Axis
    primaryYAxis:
    {
        title: 'Profit ($)',
        rangePadding: 'None',
        majorTickLines: { width: 0 }
    },    
    series: [
        {
            type: 'Column',
            dataSource: series1,
            name: 'Product X',
            xName: 'x',
            yName: 'y',
            animation: { enable: false }
        },
    ],
    title: 'Sales History of Product X',
    wallColor: 'transparent',
    enableRotation: true,
    rotation: 7,
    tilt: 10,
    depth: 100
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Search docs

Ask HelpBot