Search results

Points Customization in JavaScript (ES5) Chart control

22 Oct 2021 / 2 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.

Copied to clipboard
var chart = new ej.charts.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'
Copied to clipboard
<!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="" type="text/javascript"></script>

	<svg width="20" height="20" xmlns="" version="1.1">
			<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 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 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 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 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>
	<div id="container">
		<div id="element" style="height: 300px"></div>

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