Title and sub title in Angular Accumulation chart component

10 Apr 202524 minutes to read

Accumulation Chart can be given a title using title property, to show the information about the data plotted.

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' [title]='title'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public title?: string;
    public titleStyle?: Object;
    ngOnInit(): void {
        this.piedata = [{ x: 'Saudi Arabia', y: 58, text: '58%' },
                        { x: 'Persian Gulf', y: 15, text: '15%' },
                        { x: 'Canada', y: 13, text: '13%' },
                        { x: 'Venezuela', y: 8, text: '8%' },
                        { x: 'Mexico', y: 3, text: '3%' },
                        { x: 'Russia', y: 2, text: '2%' },
                        { x: 'Miscellaneous', y: 1, text: '1%' }];
        this.legendSettings = {
            visible: false
        };
        this.title = 'Oil and other liquid imports in USA';
    }

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

Title customization

Accumulation Chart can be customizing a title using titleStyle 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';
import { pieData } from './datasource';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [title]='title' [titleStyle]='titleStyle'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public title?: string;
    public titleStyle?: Object;
    ngOnInit(): void {
        this.piedata = [{ x: 'Saudi Arabia', y: 58, text: '58%' },
                        { x: 'Persian Gulf', y: 15, text: '15%' },
                        { x: 'Canada', y: 13, text: '13%' },
                        { x: 'Venezuela', y: 8, text: '8%' },
                        { x: 'Mexico', y: 3, text: '3%' },
                        { x: 'Russia', y: 2, text: '2%' },
                        { x: 'Miscellaneous', y: 1, text: '1%' }];
        this.legendSettings = {
            visible: false
        };
        this.title = 'Oil and other liquid imports in USA';
        this.titleStyle = {
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D",
            size: '23px'
     }
    }

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

Position

The position property customizes the placement of the accumulation chart title. It supports the following options: Right, Left, Bottom, Top, and Custom. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements.

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';
import { pieData } from './datasource';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [title]='title' [subTitle] = 'subTitle' [titleStyle]='titleStyle'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public title?: string;
    public subTitle?: string;
    public titleStyle?: Object;
    ngOnInit(): void {
        this.piedata = [{ x: 'Saudi Arabia', y: 58, text: '58%' },
                        { x: 'Persian Gulf', y: 15, text: '15%' },
                        { x: 'Canada', y: 13, text: '13%' },
                        { x: 'Venezuela', y: 8, text: '8%' },
                        { x: 'Mexico', y: 3, text: '3%' },
                        { x: 'Russia', y: 2, text: '2%' },
                        { x: 'Miscellaneous', y: 1, text: '1%' }];
        this.legendSettings = {
            visible: false
        };
        this.subTitle = 'In the year 2014 - 2015';
        this.title = 'Oil and other liquid imports in USA';
        this.titleStyle = {
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D",
            size: '23px',
            position: 'Bottom'
     }
    }

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

SubTitle

Accumulation Chart can be given a subtitle using subTitle property, to show the information
about the data plotted.

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';
import { pieData } from './datasource';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [title]='title' [subTitle]='subTitle'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public title?: string;
    public SubTitle?: string;
    public subTitleStyle?: Object;
    subTitle?: string;
    ngOnInit(): void {
        this.piedata = [{ x: 'Saudi Arabia', y: 58, text: '58%' },
                        { x: 'Persian Gulf', y: 15, text: '15%' },
                        { x: 'Canada', y: 13, text: '13%' },
                        { x: 'Venezuela', y: 8, text: '8%' },
                        { x: 'Mexico', y: 3, text: '3%' },
                        { x: 'Russia', y: 2, text: '2%' },
                        { x: 'Miscellaneous', y: 1, text: '1%' }];
        this.legendSettings = {
            visible: false
        };
        this.title = 'Oil and other liquid imports in USA';
        this.subTitle = 'In the year 2014 - 2015';
    }

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

SubTitle customization

Accumulation Chart can be customizing a subtitle using subTitleStyle 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';
import { pieData } from './datasource';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [title]='title' [subTitle]='subTitle' [subTitleStyle]='subTitleStyle'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public title?: string;
    public SubTitle?: string;
    public subTitleStyle?: Object;
    subTitle?: string;
    ngOnInit(): void {
        this.piedata = [{ x: 'Saudi Arabia', y: 58, text: '58%' },
                        { x: 'Persian Gulf', y: 15, text: '15%' },
                        { x: 'Canada', y: 13, text: '13%' },
                        { x: 'Venezuela', y: 8, text: '8%' },
                        { x: 'Mexico', y: 3, text: '3%' },
                        { x: 'Russia', y: 2, text: '2%' },
                        { x: 'Miscellaneous', y: 1, text: '1%' }];
        this.legendSettings = {
            visible: false
        };
        this.title = 'Oil and other liquid imports in USA';
        this.subTitle = 'In the year 2014 - 2015';
        this.subTitleStyle = {
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D"
     }
    }

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

Position

The position property customizes the placement of the accumulation chart subtitle. It supports the following options: Right, Left, Bottom, Top, and Custom. The custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements.

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';
import { pieData } from './datasource';
@Component({
imports: [
         AccumulationChartModule
    ],

providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
     AccumulationAnnotationService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [title]='title' [subTitle] = 'subTitle' [titleStyle]='titleStyle'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public legendSettings?: Object;
    public title?: string;
    public subTitle?: string;
    public titleStyle?: Object;
    ngOnInit(): void {
        this.piedata = [{ x: 'Saudi Arabia', y: 58, text: '58%' },
                        { x: 'Persian Gulf', y: 15, text: '15%' },
                        { x: 'Canada', y: 13, text: '13%' },
                        { x: 'Venezuela', y: 8, text: '8%' },
                        { x: 'Mexico', y: 3, text: '3%' },
                        { x: 'Russia', y: 2, text: '2%' },
                        { x: 'Miscellaneous', y: 1, text: '1%' }];
        this.legendSettings = {
            visible: false
        };
        this.subTitle = 'In the year 2014 - 2015';
        this.title = 'Oil and other liquid imports in USA';
        this.titleStyle = {
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D",
            size: '23px',
            position: 'Bottom'
     }
    }

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