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/25.1.35/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>