Points customization in EJ2 TypeScript Chart control

8 May 20237 minutes to read

You can customize the series points with patterns by using the pointColorMapping property.

To customize the series point colors, follow the given steps:

Step 1:

Define the patterns and map the pattern URL to the series point using pointColorMapping property in series.

import { Chart, ColumnSeries, Category, DataLabel, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip);
import { EmitType } from '@syncfusion/ej2-base';

    let chart: Chart = new Chart({
        //Initializing Primary X Axis
        primaryXAxis: {
            valueType: 'Category',
        //Initializing Primary Y Axis
            minimum: 0, maximum: 250, interval: 50

        //Initializing Chart Series
        series: [
                type: 'Column', xName: 'x', width: 2, yName: 'y', pointColorMapping: 'color',
                dataSource: [
                    { 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: 230, text: 'Malaysia',  color: 'url(#line)' }
                ], name: 'Tiger',
                cornerRadius: {
                    bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10
        legendSettings: { visible: false },
        //Initializing Chart title
        title: 'Tiger Population - 2016',
    height: '300px'
<!DOCTYPE html>
<html lang="en">

	<title>EJ2 Animation</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Typescript UI Controls" />
	<meta name="author" content="Syncfusion" />
	<link href="index.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
	<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>

	<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<pattern id="chess" x="0" y="0" patternUnits='userSpaceOnUse' width="20" height="20">
				<rect width='20' height='20' fill='#fff' />
				<rect width='10' height='10' fill='#ed7d31' />
				<rect x='10' y='10' width='10' height='10' fill='#ed7d31' />
			<pattern id="cross" x="0" y="0" patternUnits='userSpaceOnUse' width="8" height="8">
				<rect width='8' height='8' fill='#4472c4' />
				<path d='M0 0L8 8ZM8 0L0 8Z' stroke-width='1' stroke='white' />
			<pattern id="circle" x="0" y="0" patternUnits='userSpaceOnUse' width="9" height="9">
				<rect fill="#FFFFFF" width="9" height="9" />
				<circle fill="#f7ce69" cx="5.125" cy="3.875" r="3.625" />
			<pattern id="rectangle" x="0" y="0" patternUnits='userSpaceOnUse' width="12" height="12">
				<rect fill="#FFFFFF" width="12" height="11" />
				<rect x="1" y="2" fill="#404041" width="4" height="9" />
				<rect x="7" y="2" fill="#404041" width="4" height="9" />
			<pattern id="line" x="0" y="0" patternUnits='userSpaceOnUse' width="12" height="12">
				<line fill="none" stroke="#7ddf1e" stroke-miterlimit="10" x1="0" y1="1.5" x2="10" y2="1.5" />
				<line fill="none" stroke="#7ddf1e" stroke-miterlimit="10" x1="0" y1="5.5" x2="10" y2="5.5" />
				<line fill="none" stroke="#7ddf1e" stroke-miterlimit="10" x1="0" y1="9.5" x2="10" y2="9.5" />
	<div id='loader'>Loading....</div>
	<div id='container'>
		<div id='element' style="height: 300px"></div>