Series Labels in Angular Chart Component

18 Nov 201821 minutes to read

Series labels display the name of each series directly on the chart, positioned near the end of the series path or at the last visible data point. This helps identify series without relying on the legend.

Overview

Enable series labels using the labelSettings property within the series configuration. Set the visible property to true to display the label.

import { Component, OnInit } from '@angular/core';
import { ChartAllModule} from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, CategoryService, DataLabelService, LegendService } from '@syncfusion/ej2-angular-charts';

import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

@Component({
    imports: [
        ChartAllModule
    ],
    providers: [LineSeriesService, CategoryService, DataLabelService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="charts" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">
        <e-series-collection>
            <e-series [dataSource]="vietnamData" type="Line" xName="x" yName="y" name="Vietnam"
                [marker]="marker" [labelSettings]="labelSettings">
                </e-series>
            <e-series [dataSource]="indonesiaData" type="Line" xName="x" yName="y" name="Indonesia"
                [marker]="marker" [labelSettings]="labelSettings">
                </e-series>
            <e-series [dataSource]="franceData" type="Line" xName="x" yName="y" name="France"
                [marker]="marker" [labelSettings]="labelSettings">
                </e-series>
            <e-series [dataSource]="polandData" type="Line" xName="x" yName="y" name="Poland"
                [marker]="marker" [labelSettings]="labelSettings">
                </e-series>
            <e-series [dataSource]="mexicoData" type="Line" xName="x" yName="y" name="Mexico"
                [marker]="marker" [labelSettings]="labelSettings">
                </e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public legendSettings?: Object;
    public marker?: Object;
    public labelSettings?: Object;

    public vietnamData?: Object[];
    public indonesiaData?: Object[];
    public franceData?: Object[];
    public polandData?: Object[];
    public mexicoData?: Object[];

    ngOnInit(): void {
        this.vietnamData = vietnamData;
        this.indonesiaData = indonesiaData;
        this.franceData = franceData;
        this.polandData = polandData;
        this.mexicoData = mexicoData;

        this.primaryXAxis = {
            valueType: 'Category'
        };

        this.legendSettings = {
            visible: true
        };

        this.marker = {
            visible: true
        };

        this.labelSettings= {
            visible: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let vietnamData: { x: number; y: number }[] = [
    { x: 2016, y: 7.8 }, { x: 2017, y: 10.3 }, { x: 2018, y: 15.5 },
    { x: 2019, y: 17.5 }, { x: 2020, y: 19.5 }, { x: 2021, y: 23.0 },
    { x: 2022, y: 20.0 }, { x: 2023, y: 19.0 }, { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
    { x: 2016, y: 4.8 }, { x: 2017, y: 5.2 }, { x: 2018, y: 6.2 },
    { x: 2019, y: 7.8 }, { x: 2020, y: 9.3 }, { x: 2021, y: 14.3 },
    { x: 2022, y: 15.6 }, { x: 2023, y: 16.0 }, { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
    { x: 2016, y: 14.6 }, { x: 2017, y: 15.5 }, { x: 2018, y: 15.4 },
    { x: 2019, y: 14.4 }, { x: 2020, y: 11.6 }, { x: 2021, y: 13.9 },
    { x: 2022, y: 12.1 }, { x: 2023, y: 10.0 }, { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
    { x: 2016, y: 8.9 }, { x: 2017, y: 10.3 }, { x: 2018, y: 10.8 },
    { x: 2019, y: 9.0 }, { x: 2020, y: 7.9 }, { x: 2021, y: 8.5 },
    { x: 2022, y: 7.4 }, { x: 2023, y: 6.4 }, { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
    { x: 2016, y: 19.0 }, { x: 2017, y: 20.0 }, { x: 2018, y: 20.2 },
    { x: 2019, y: 18.4 }, { x: 2020, y: 16.8 }, { x: 2021, y: 18.5 },
    { x: 2022, y: 18.4 }, { x: 2023, y: 16.3 }, { x: 2024, y: 13.7 }
];

Note: To use the series label feature, inject the DataLabelService into the providers.

Customization

You can customize the appearance and behavior of series labels using the following properties:

  • text – Custom text for the series label. If not specified, the series name is used by default.
  • font – Font customization options including color, size, family, and weight.
  • background – Background color of the label.
  • border – Border width and color.
  • opacity – Label transparency (default: 1).
  • showOverlapLabel – When false, overlapping labels are hidden.
import { Component, OnInit } from '@angular/core';
import { ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, CategoryService, DataLabelService, LegendService } from '@syncfusion/ej2-angular-charts';

import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

@Component({
    imports: [
        ChartAllModule
    ],
    providers: [LineSeriesService, CategoryService, DataLabelService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="charts" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">
        <e-series-collection>
            <e-series [dataSource]="vietnamData" type="Line" xName="x" yName="y" name="Vietnam"
                [marker]="marker" [labelSettings]="vietnamLabelSettings"></e-series>
            <e-series [dataSource]="indonesiaData" type="Line" xName="x" yName="y" name="Indonesia"
                [marker]="marker" [labelSettings]="indonesiaLabelSettings"></e-series>
            <e-series [dataSource]="franceData" type="Line" xName="x" yName="y" name="France"
                [marker]="marker" [labelSettings]="franceLabelSettings"></e-series>
            <e-series [dataSource]="polandData" type="Line" xName="x" yName="y" name="Poland"
                [marker]="marker" [labelSettings]="polandLabelSettings"></e-series>
            <e-series [dataSource]="mexicoData" type="Line" xName="x" yName="y" name="Mexico"
                [marker]="marker" [labelSettings]="mexicoLabelSettings"></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public legendSettings?: Object;
    public marker?: Object;

    public vietnamLabelSettings?: Object;
    public indonesiaLabelSettings?: Object;
    public franceLabelSettings?: Object;
    public polandLabelSettings?: Object;
    public mexicoLabelSettings?: Object;

    public vietnamData?: Object[];
    public indonesiaData?: Object[];
    public franceData?: Object[];
    public polandData?: Object[];
    public mexicoData?: Object[];

    ngOnInit(): void {
        this.vietnamData = vietnamData;
        this.indonesiaData = indonesiaData;
        this.franceData = franceData;
        this.polandData = polandData;
        this.mexicoData = mexicoData;

        this.primaryXAxis = {
            valueType: 'Category'
        };

        this.legendSettings = {
            visible: true
        };

        this.marker = {
            visible: true
        };

        this.vietnamLabelSettings = {
            visible: true,
            text: 'Vietnam',
            background: '#E8F5E9',
            border: { width: 2, color: '#2E7D32' },
            opacity: 0.9,
            font: { size: '12px', fontWeight: '600', color: '#2E7D32' },
            showOverlapText: true
        };

        this.indonesiaLabelSettings = {
            visible: true,
            text: 'Indonesia',
            background: '#FFF3E0',
            border: { width: 2, color: '#FB8C00' },
            opacity: 0.9,
            font: { size: '12px', fontWeight: '600', color: '#FB8C00' },
            showOverlapText: true
        };

        this.franceLabelSettings = {
            visible: true,
            text: 'France',
            background: '#E3F2FD',
            border: { width: 2, color: '#1976D2' },
            opacity: 0.9,
            font: { size: '12px', fontWeight: '600', color: '#1976D2' },
            showOverlapText: true
        };

        this.polandLabelSettings = {
            visible: true,
            text: 'Poland',
            background: '#F3E5F5',
            border: { width: 2, color: '#8E24AA' },
            opacity: 0.9,
            font: { size: '12px', fontWeight: '600', color: '#8E24AA' },
            showOverlapText: true
        };

        this.mexicoLabelSettings = {
            visible: true,
            text: 'Mexico',
            background: '#FBE9E7',
            border: { width: 2, color: '#D84315' },
            opacity: 0.9,
            font: { size: '12px', fontWeight: '600', color: '#D84315' },
            showOverlapText: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let vietnamData: { x: number; y: number }[] = [
    { x: 2016, y: 7.8 }, { x: 2017, y: 10.3 }, { x: 2018, y: 15.5 },
    { x: 2019, y: 17.5 }, { x: 2020, y: 19.5 }, { x: 2021, y: 23.0 },
    { x: 2022, y: 20.0 }, { x: 2023, y: 19.0 }, { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
    { x: 2016, y: 4.8 }, { x: 2017, y: 5.2 }, { x: 2018, y: 6.2 },
    { x: 2019, y: 7.8 }, { x: 2020, y: 9.3 }, { x: 2021, y: 14.3 },
    { x: 2022, y: 15.6 }, { x: 2023, y: 16.0 }, { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
    { x: 2016, y: 14.6 }, { x: 2017, y: 15.5 }, { x: 2018, y: 15.4 },
    { x: 2019, y: 14.4 }, { x: 2020, y: 11.6 }, { x: 2021, y: 13.9 },
    { x: 2022, y: 12.1 }, { x: 2023, y: 10.0 }, { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
    { x: 2016, y: 8.9 }, { x: 2017, y: 10.3 }, { x: 2018, y: 10.8 },
    { x: 2019, y: 9.0 }, { x: 2020, y: 7.9 }, { x: 2021, y: 8.5 },
    { x: 2022, y: 7.4 }, { x: 2023, y: 6.4 }, { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
    { x: 2016, y: 19.0 }, { x: 2017, y: 20.0 }, { x: 2018, y: 20.2 },
    { x: 2019, y: 18.4 }, { x: 2020, y: 16.8 }, { x: 2021, y: 18.5 },
    { x: 2022, y: 18.4 }, { x: 2023, y: 16.3 }, { x: 2024, y: 13.7 }
];