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
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://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>
</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 width='10' height='10' fill='#ed7d31' />
<rect x='10' y='10' width='10' height='10' fill='#ed7d31' />
</pattern>
<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>
<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>
<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>
<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" />
</pattern>
</defs>
</svg>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element' style="height: 300px"></div>
</div>
</body>
</html>