Points customization in EJ2 JavaScript 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
        primaryYAxis:
        {
            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',
    width:'650px',
    height: '300px'
    },'#element');
<!DOCTYPE html><html lang="en"><head>
	<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://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>