Points customization in Angular Chart component
27 Apr 20244 minutes to read
You can customize the series points by using the pointColorMapping
property.
To customize the series point colors, follow the given steps:
Step 1:
Customize the point colors to set the color value by using the pointColorMapping
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { ColumnSeriesService, CategoryService, DataLabelService} from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
ChartModule
],
providers: [ ColumnSeriesService, CategoryService, DataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='data' type='Column' xName='x' yName='y' name='Tiger' width=2 [marker]='marker' [cornerRadius]='radius'
[pointColorMapping]='pointColorMapping'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public title?: string;
public primaryYAxis?: Object;
public data?: Object[];
public pointColorMapping?:string;
public radius?: Object;
marker: any;
ngOnInit(): void {
this.data = [
{ x: 'BGD', y: 106, text: 'Bangaladesh', color: 'url(#chess)' },
{ x: 'BTN', y: 103, text: 'Bhutn', color: 'url(#cross)' },
{ x: 'NPL', y: 198, text: 'Nepal', color: 'url(#circle)' },
{ x: 'THA', y: 189, text: 'Thiland', color: 'url(#rectangle)' },
{ x: 'MYS', y: 250, text: 'Malaysia', color: 'url(#line)' }
];
this.primaryXAxis = {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
};
this.primaryYAxis = {
minimum: 0, maximum: 300, interval: 50
};
this.radius={ bottomLeft: 15, bottomRight: 15, topLeft: 15, topRight: 15 };
this.pointColorMapping = 'color';
this.title = 'Tiger Population - 2016';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));