Pareto in Angular Chart component
27 Apr 202410 minutes to read
Pareto
Pareto charts are used to find the cumulative values of data in different categories. It is a combination of Column and Line series.
The initial values are represented by column chart and the cumulative values are represented by Line chart.
To render a pareto chart, use series type as Pareto and inject ParetoSeries ColumnSeries and LineSeries module.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { splineData } from './datasource';
@Component({
imports: [
ChartModule
],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
<e-series-collection>
<e-series [dataSource]='chartData' type='Pareto' xName='x' yName='y' name='Defect' width=2 [marker]='marker'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public primaryYAxis?: Object;
public marker?: Object;
public tooltip?: Object;
ngOnInit(): void {
this.chartData = [
{ x: 'Traffic', y: 56 }, { x: 'Child Care', y: 44.8 },
{ x: 'Transport', y: 27.2 }, { x: 'Weather', y: 19.6 },
{ x: 'Emergency', y: 6.6 }
];
this.primaryXAxis = {
title: 'Defects',
valueType: 'Category',
};
this.marker = { visible: true, width: 10, height: 10 };
this.primaryYAxis = {
title: 'Frequency',
minimum: 0,
maximum: 150,
interval: 30,
};
this.tooltip = { enable: true, shared: true }
this.title = 'Climate Graph-2012';
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Pareto customization
The pareto line series can be customized by using the marker, width, dashArray, and fill properties in the paretoOptions. The secondary axis for the pareto series can be shown or hidden using the showAxis property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { Browser } from '@syncfusion/ej2-base';
@Component({
imports: [
ChartModule
],
providers: [ CategoryService, LineSeriesService, StepLineSeriesService, SplineSeriesService, StackingLineSeriesService, DateTimeService,
SplineAreaSeriesService, MultiColoredLineSeriesService, ParetoSeriesService, ColumnSeriesService],
standalone: true,
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
<e-series-collection>
<e-series [dataSource]='chartData' type='Pareto' xName='x' yName='y' name='Defect' width=2 opacity="0.75" [cornerRadius]="cornerRadius" columnWidth="0.4" [paretoOptions]='paretoOptions'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public primaryYAxis?: Object;
public tooltip?: Object;
public cornerRadius: Object = {
topLeft: Browser.isDevice ? 4 : 6, topRight: Browser.isDevice ? 4 : 6
};
public paretoOptions: Object = {
marker: {
visible: true,
isFilled: true,
width: 7,
height: 7
},
dashArray: '3,2',
width: 2,
fill: '#F7523F'
};
ngOnInit(): void {
this.chartData = [
{ x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
{ x: 'Collar Defect', y: 10 }, { x: 'Cuff Defect', y: 7 },
{ x: 'Sleeve Defect', y: 6 }, { x: 'Other Defect', y: 2 }
];
this.primaryXAxis = {
interval: 1,
valueType: 'Category',
majorGridLines: { width: 0 }, minorGridLines: { width: 0 },
majorTickLines: { width: 0 }, minorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelIntersectAction: 'Rotate90'
};
this.primaryYAxis = {
title: 'Frequency of Occurence',
minimum: 0,
maximum: 25,
interval: 5,
lineStyle: { width: 0 },
majorTickLines: { width: 0 }, majorGridLines: { width: 1 },
minorGridLines: { width: 1 }, minorTickLines: { width: 0 }
};
this.tooltip = { enable: true, shared: true, format: '${series.name} : <b>${point.y}</b>' };
this.title = 'Defects in Shirts';
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));