Category Axis in Angular Chart

31 Aug 202612 minutes to read

The category axis is used to represent string-based values instead of numeric values. It is commonly used for displaying discrete categories such as names, labels, or textual groupings along an axis.

The following snippet renders a column chart with a category-based x-axis.

To learn more about the category axis, watch this video:

import { Component, OnInit } from '@angular/core';
import { ChartModule, CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = [
             { country: "USA", gold: 50 },
             { country: "China", gold: 40 },
             { country: "Japan", gold: 70 },
             { country: "Australia", gold: 60 },
             { country: "France", gold: 50 },
             { country: "Germany", gold: 40 },
             { country: "Italy", gold: 40 },
             { country: "Sweden", gold: 30 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries'
        };
        this.primaryYAxis = {
            minimum: 0, maximum: 80,
            interval: 20, title: 'Medals'
        };
        this.title = 'Olympic Medals';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: To use the category axis, inject CategoryService into the @NgModule.providers and set the valueType property of the axis to Category.

Range

The visible range of the category axis can be customized by using the minimum, maximum and interval properties of the axis. These properties control the start value, end value, and spacing between category labels.

For a category axis, minimum, maximum, and interval operate on index positions of the categories rather than on the category labels themselves.

import { Component, OnInit } from '@angular/core';
import { ChartModule, CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
import { categoryData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = categoryData;
        this.primaryXAxis = {
            valueType: 'Category',
            minimum: 1,
            maximum: 5,
            interval: 2,
            title: 'Countries'
        };
        this.title = 'Olympic Medals';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Label Placement

By default, category labels are positioned between the axis tick marks (BetweenTicks). They can also be aligned directly on the ticks (OnTicks) by using the labelPlacement property.

import { Component, OnInit } from '@angular/core';
import { ChartModule, CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
import { categoryData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='country' yName='gold' name='Gold'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = categoryData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries',
            labelPlacement: 'OnTicks'
        };
        this.title = 'Olympic Medals';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Indexed category axis

The category axis can also be rendered based on the index values of the data source. This behavior can be enabled by setting the isIndexed property of the axis to true, which positions data points by their index while reusing the shared category label set. This is useful when multiple series need to be aligned at the same x positions.

import { Component, OnInit } from '@angular/core';
import { ChartModule, CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData1' type='Column' xName='x' yName='y' name='Series 1'></e-series>
            <e-series [dataSource]='chartData2' type='Column' xName='x' yName='y' name='Series 2'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData1?: Object[];
    public chartData2?: Object[];
    public title?: string;

    ngOnInit(): void {
        // Two series share overlapping categories. With isIndexed=true, points
        // are aligned by index, so the same x-position shows values from
        // both series even when their category sets differ.
        this.chartData1 = [
            { x: 'Myanmar', y: 7.3 },
            { x: 'India', y: 7.9 },
            { x: 'Bangladesh', y: 6.8 },
            { x: 'Cambodia', y: 7.0 },
            { x: 'China', y: 6.9 }
        ];
        this.chartData2 = [
            { x: 'Poland', y: 2.7 },
            { x: 'Australia', y: 2.5 },
            { x: 'Singapore', y: 2.0 },
            { x: 'Canada', y: 1.4 },
            { x: 'Germany', y: 1.8 }
        ];
        this.primaryXAxis = {
            valueType: 'Category',
            isIndexed: true
        };
        this.title = 'Olympic Medals';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also