Logarithmic Axis in Angular Chart

31 Aug 202619 minutes to read

The logarithmic axis uses a logarithmic scale and is particularly useful for visualizing data that spans a wide range of values. It effectively represents datasets that include both very small values (for example, 10-6) and very large values (for example, 106) within the same chart, improving readability and comparison.

To know about logarithmic axis, you can check on this video:

To use a logarithmic axis, inject the LogarithmicService into your component and set the valueType property of the axis to Logarithmic. The following example shows a line chart with a logarithmic y-axis.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LogarithmicService, DateTimeService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ LogarithmicService, LineSeriesService, DateTimeService],
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='Line' xName='x' yName='y' name='Product X'></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: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
                { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
                { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
                { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
                { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
                { x: new Date(2005, 0, 1), y: 11000 }
        ];
        this.primaryXAxis = {
            valueType: 'DateTime',
            title: 'Years',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
           valueType: 'Logarithmic',
           title: 'Profit'
        };
        this.title = 'Product X Growth [1995-2005]';
    }

}
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 logarithmic axis, register LogarithmicService in the standalone component’s providers (legacy: inject LogarithmicService into @NgModule.providers) and set the valueType property of the axis to Logarithmic.

Range

The range of the logarithmic axis is calculated automatically based on the provided data, ensuring that all data points are visible within the chart area. The axis range can also be customized explicitly using the minimum, maximum, and interval properties.

Note: The minimum value for a logarithmic axis must be greater than zero and should be a power of the logBase. Setting minimum to zero or a negative value results in an empty chart because the logarithm of non-positive numbers is undefined.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LogarithmicService, DateTimeService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { logData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ LogarithmicService, LineSeriesService, DateTimeService],
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='Line' xName='x' yName='y' name='Product X'></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 = logData;
        this.primaryXAxis = {
            valueType: 'DateTime',
            title: 'Years',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
           valueType: 'Logarithmic',
           title: 'Profit',
           minimum: 100,
           maximum: 10000
        };
        this.title = 'Product X Growth [1995-2005]';
    }

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

Logarithmic base

The logarithmic base of the axis can be customized using the logBase property. This property determines how the axis values are distributed along the scale.
For example, when the logarithmic base is set to 5, the axis values follow the sequence 5-2, 5-1, 50, 51, 52, and so on.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LogarithmicService, DateTimeService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { logData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ LogarithmicService, LineSeriesService, DateTimeService],
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='Line' xName='x' yName='y' name='Product X'></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 = logData;
        this.primaryXAxis = {
            valueType: 'DateTime',
            title: 'Years',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
           valueType: 'Logarithmic',
           title: 'Profit',
           logBase: 5
        };
        this.title = 'Product X Growth [1995-2005]';
    }

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

Logarithmic interval

The spacing between logarithmic axis labels can be controlled using the interval property. This property defines the step size between consecutive logarithmic values.
For example, when the logarithmic base is 10 and the interval is set to 2, the axis labels are placed at values such as 102, 104, and 106. The default value of the interval is 1.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LogarithmicService, DateTimeService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { logData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ LogarithmicService, LineSeriesService, DateTimeService],
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='Line' xName='x' yName='y' name='Product X'></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 = logData;
        this.primaryXAxis = {
            valueType: 'DateTime',
            title: 'Years',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
           valueType: 'Logarithmic',
           title: 'Profit',
           interval: 2
        };
        this.title = 'Product X Growth [1995-2005]';
    }

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

Edge Label Placement

When the first or last label on a logarithmic axis is partially hidden by the chart edge, you can use the edgeLabelPlacement property to control its position. The supported values are None, Shift, and Hide. The default value is None.

Label Format

Numeric labels on the logarithmic axis can be customized using the labelFormat property. This property supports all Globalize numeric formats as well as placeholders such as {value}K to append custom units.

For example, with labelFormat set to {value}K, the axis label 2000 is rendered as 2000K.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LogarithmicService, DateTimeService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { logData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ LogarithmicService, LineSeriesService, DateTimeService],
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='Line' xName='x' yName='y' name='Product X'></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 = logData;
        this.primaryXAxis = {
            valueType: 'DateTime',
            title: 'Years',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
           valueType: 'Logarithmic',
           title: 'Profit',
           labelFormat: '{value}K'
        };
        this.title = 'Product X Growth [1995-2005]';
    }

}
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 logarithmic axis range using the rangePadding property. The logarithmic axis supports the following options: None, Round, Additional, Normal, and Auto.

For example, when rangePadding is set to Round, the axis minimum and maximum are rounded to the nearest power of the logBase, producing clean axis boundaries.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LogarithmicService, DateTimeService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { logData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ LogarithmicService, LineSeriesService, DateTimeService],
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='Line' xName='x' yName='y' name='Product X'></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 = logData;
        this.primaryXAxis = {
            valueType: 'DateTime',
            title: 'Years',
            labelFormat: 'y'
        };
        this.primaryYAxis = {
           valueType: 'Logarithmic',
           title: 'Profit',
           rangePadding: 'Round'
        };
        this.title = 'Product X Growth [1995-2005]';
    }

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

See Also

  • Numeric Axis: Use numeric axis for continuous numerical data such as measurements or sales figures.
  • Category Axis: Use category axis for discrete text-based categories.
  • DateTime Axis: Use datetime axis for time-series data.
  • API Reference - Axis: Complete API documentation for axis properties and methods.