Centerlabel

27 Apr 202410 minutes to read

Using centerLabel it is now possible to place a label at the center of a pie or donut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the text property in the centerLabel.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
  AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template:
        `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [centerLabel]='centerLabel'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='centerLabelData' xName='x' yName='y' innerRadius='65%'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public centerLabel?: Object;
    public centerLabelData: Object = [
        { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
        { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
        { x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },
        { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
        { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
        { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
    ];
    ngOnInit(): void {
        this.legendSettings = {
            visible: false
        };
        this.centerLabel = {
            text: 'Mobile<br>Browsers<br>Statistics'
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hover text

The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the hoverTextFormat property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
  AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template:
        `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [centerLabel]='centerLabel'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='centerLabelData' xName='x' yName='y' innerRadius='65%'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public centerLabel?: Object;
    public centerLabelData: Object = [
        { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
        { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
        { x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },
        { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
        { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
        { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
    ];
    ngOnInit(): void {
        this.legendSettings = {
            visible: false
        };
        this.centerLabel = {
            text: 'Mobile<br>Browsers<br>Statistics',
            hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customization

Customize the center label text using the textStyle property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
  AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [centerLabel]='centerLabel'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='centerLabelData' xName='x' yName='y' innerRadius='65%' ></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public centerLabel?: Object;
    public centerLabelData: Object= [
        { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
        { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
        { x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },
        { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
        { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
        { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
    ];
    ngOnInit(): void {
        this.legendSettings = {
            visible: false
        };
        this.centerLabel = {
            text : 'Mobile<br>Browsers<br>Statistics',
            hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
            textStyle:{
                fontWeight: '900',
                size: '15px',
                color: 'grey',
                fontFamily: 'Roboto',
                fontStyle: 'Italic'
            }
        }

    }

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