Title and sub title in Angular Accumulation chart component
18 Nov 202217 minutes to read
Accumulation Chart can be given a title using title
property, to show the information about the data plotted.
import { Component, OnInit } from '@angular/core';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Title Customization
Accumulation Chart can be customizing a title using titleStyle
property.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
SubTitle
Accumulation Chart can be given a subtitle using subTitle
property, to show the information
about the data plotted.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
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;
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
SubTitle Customization
Accumulation Chart can be customizing a subtitle using subTitleStyle
property.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
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;
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);