Syncfusion AI Assistant

How can I help you?

Numeric axis in Angular Chart component

13 Mar 202624 minutes to read

The numeric axis displays numerical values along the chart’s x-axis or y-axis. By default, the valueType of an axis is set to Double, which is suitable for displaying continuous numerical data such as temperatures, measurements, sales figures, or any decimal values.

To learn more about numeric axes, you can watch this video:

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

@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
    { x: 1, y: 7 }, { x: 2, y: 1 }, { x: 3, y: 1 }, { x: 4, y: 14 }, { x: 5, y: 1 }, { x: 6, y: 10 },
    { x: 7, y: 8 }, { x: 8, y: 6 }, { x: 9, y: 10 }, { x: 10, y: 10 }, { x: 11, y: 16 }, { x: 12, y: 6 },
    { x: 13, y: 14 }, { x: 14, y: 7 }, { x: 15, y: 5 }, { x: 16, y: 2 }, { x: 17, y: 14 }, { x: 18, y: 7 },
    { x: 19, y: 7 }, { x: 20, y: 10 }];
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Automatic Axis Calculation

By default, the chart automatically calculates optimal axis ranges and tick positions to ensure data is displayed clearly and the axis labels use “nice” round numbers. The automatic calculation follows these principles:

  • Range Calculation: The axis extends slightly beyond your data’s minimum and maximum values to prevent data points from appearing at the edges
  • Tick Positioning: Tick marks are placed at round values (such as 0, 5, 10, 20, 50, 100) rather than arbitrary numbers, making the chart easier to read
  • Interval Selection: The interval between ticks is chosen to provide clear spacing while showing enough detail

For example, if your data values range from 12 to 87, the axis might automatically display from 0 to 100 with tick marks at 0, 20, 40, 60, 80, and 100. This behavior can be overridden using the properties described in the following sections.

Range

The range of the axis is calculated automatically based on the provided data, with the chart determining optimal minimum and maximum values to display all data points clearly. For example, if your data ranges from 15 to 95, the axis might automatically display from 0 to 100 with appropriate intervals for better readability.

You can customize the visible range by using the minimum, maximum, and interval properties of the axis.

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

@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.primaryXAxis = {
            valueType: 'Double',
            minimum: 1,
            maximum: 20,
            interval: 5,
            title: 'Overs'
        };
        this.chartData = chartData;
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Range Padding

Padding can be applied to the minimum and maximum values of the axis range by using the rangePadding property. The numeric axis supports the following padding options:

  • None
  • Round
  • Additional
  • Normal
  • Auto

Numeric - None

When the rangePadding property is set to None, the minimum and maximum values of the axis are derived directly from the data without any additional padding. This displays exactly the data range, which is useful when you want to maximize the data display area or when your data naturally fits within clean boundaries.

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

@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            valueType: 'Double',
            title: 'Overs'
        };
        this.primaryYAxis = {
           title: 'Runs',
           valueType: 'Double',
           rangePadding: 'None'
        };
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Numeric - Round

When the rangePadding property is set to Round, the minimum and maximum values are rounded to the nearest values divisible by the interval, creating cleaner axis boundaries. For example, if the minimum value is 3.5 and the interval is 1, the minimum value is rounded down to 3. Similarly, if the maximum is 48.7, it would be rounded up to 49.

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

@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            valueType: 'Double',
            title: 'Overs'
        };
        this.primaryYAxis = {
           title: 'Runs',
           valueType: 'Double',
           rangePadding: 'Round'
        };
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Numeric - Additional

When the rangePadding property is set to Additional, one interval is added to both the minimum and maximum values of the axis range. This ensures extra space around your data, preventing data points from appearing too close to the axis edges, which improves visual clarity.

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

@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            valueType: 'Double',
            title: 'Overs'
        };
        this.primaryYAxis = {
           title: 'Runs',
           valueType: 'Double',
           rangePadding: 'Additional'
        };
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Numeric - Normal

When the rangePadding property is set to Normal, padding is applied to the axis based on the default range calculation. This provides a balanced amount of padding suitable for most chart scenarios, ensuring data points are clearly visible without excessive white space.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            valueType: 'Double',
            title: 'Overs'
        };
        this.primaryYAxis = {
           title: 'Runs',
           valueType: 'Double',
           rangePadding: 'Normal'
        };
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Numeric - Auto

When the rangePadding property is set to Auto, the chart applies different padding strategies based on axis orientation for optimal visualization:

  • Horizontal axis (X-axis): Uses None padding to maximize data display width
  • Vertical axis (Y-axis): Uses Normal padding to prevent data points from touching chart edges

This is the recommended default setting for most scenarios as it provides optimal spacing for each axis type.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
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='Area' xName='x' yName='y' name='England'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            valueType: 'Double',
            title: 'Overs'
        };
        this.primaryYAxis = {
           title: 'Runs',
           valueType: 'Double',
           rangePadding: 'Auto'
        };
        this.title = 'England - Run Rate';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Label Format

Numeric label format

Numeric axis labels can be formatted by using the labelFormat property. This property supports all Globalize numeric formats.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { formatData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='formatData' type='Area' xName='x' yName='y' name='Product X' opacity=0.6></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public formatData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.formatData = formatData;
        this.primaryXAxis = {
            title: 'Year',
            edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
           title: 'Sales Amount in Millions',
           labelFormat: 'c'
        };
        this.title = 'Average Sales Comparison';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The following table shows examples of commonly used numeric label formats and their corresponding outputs.

Label Value Label Format property value Result Description
1000 n1 1000.0 Rounded to 1 decimal place
1000 n2 1000.00 Rounded to 2 decimal places
1000 n3 1000.000 Rounded to 3 decimal places
0.01 p1 1.0% Converted to percentage with 1 decimal place
0.01 p2 1.00% Converted to percentage with 2 decimal places
0.01 p3 1.000% Converted to percentage with 3 decimal places
1000 c1 $1000.0 Currency format with 1 decimal place
1000 c2 $1000.00 Currency format with 2 decimal places
0.5 p0 50% Percentage without decimal places
1000 n0 1000 Number without decimal places

Note: The currency symbol and thousand separator format vary based on the application’s culture settings. For example, c2 displays as $1,000.00 in en-US culture and 1.000,00 € in de-DE culture.

Grouping Separator

To improve readability of large numbers, you can enable thousand separators by setting the useGroupingSeparator property to true in the chart. This formats numbers like 1000000 as 1,000,000, making them easier to read. The separator character automatically adjusts based on the application’s culture settings (e.g., comma for en-US, period for de-DE).

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { groupingData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'
     useGroupingSeparator=true>
        <e-series-collection>
            <e-series [dataSource]='groupingData' type='Column' xName='x' yName='y' name='Product X' opacity=0.6></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public groupingData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.groupingData = groupingData;
        this.primaryXAxis = {
            title: 'Quantity',
            edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
           title: 'Sales Amount in Millions',
        };
        this.title = 'Average Sales Comparison';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom Label Format

The numeric axis also supports custom label formats by using placeholders such as {value}°C, where {value} represents the numeric axis label. For example, the value 20 is displayed as 20°C. This is useful for adding units of measurement or other custom text to your axis labels.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { formatData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ ColumnSeriesService, AreaSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='formatData' type='Area' xName='x' yName='y' name='Product X' opacity=0.6></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public formatData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.formatData = formatData;
        this.primaryXAxis = {
            title: 'Year',
            edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
           title: 'Sales Amount in Millions',
           labelFormat: '${value}k'
        };
        this.title = 'Average Sales Comparison';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also

  • Axis Customization: Learn about additional axis customization options such as title, label style, and positioning
  • Category Axis: Use category axis for discrete text-based categories
  • DateTime Axis: Use datetime axis for time-series data
  • Logarithmic Axis: Use logarithmic axis for data that spans multiple orders of magnitude
  • Multiple Axes: Learn how to add and configure multiple axes in a single chart
  • API Reference - Axis: Complete API documentation for axis properties and methods