Points customization in Angular Chart component

13 Mar 20265 minutes to read

You can customize the color of individual series points by using the pointColorMapping property. This property allows you to map a field from your data source that contains color values, which will be applied to each corresponding point in the series.

Customizing point colors

The pointColorMapping property accepts a string value representing the field name in your dataSource that contains the color information. Each point will be rendered with the color specified in that field.

Step 1: Prepare your data source with a color field.

Your data source should include a field containing color values. These can be hex codes, RGB values, or named colors:

public chartData: Object[] = [
    { x: 'Jan', y: 35, pointColor: '#E94649' },
    { x: 'Feb', y: 28, pointColor: '#F6B53F' },
    { x: 'Mar', y: 34, pointColor: '#6FAAB0' },
    { x: 'Apr', y: 32, pointColor: '#C4C24A' }
];

Step 2: Set the pointColorMapping property to the color field name.

Configure the series with the pointColorMapping property pointing to your color field. This tells the chart which field in your data source contains the color values for each point.

app.component.ts

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';

    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

When you apply the pointColorMapping property, each point in the series will be rendered with its corresponding color from the data source, allowing for visually distinct points within the same series.