Points Customization in Angular Chart component

30 Jul 2021 / 2 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.

Source

Preview

app.component.ts

app.module.ts

main.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;
    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 { 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 { }

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

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);