Points customization in Angular Chart component

27 Sep 20234 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.

app.component.ts

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

@Component({
    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';

    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { ColumnSeriesService, CategoryService, DataLabelService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ ColumnSeriesService, CategoryService, DataLabelService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);