Prevent data label in EJ2 TypeScript Chart control
8 May 20236 minutes to read
To prevent the chart data label when the data value is 0, follow the given steps:
Step 1:
Get the point value and check whether the args.point.y
value is zero or not by using the textRender
event. If the value is zero, then set the args.cancel
to true.
The output will appear as follows,
import { Chart, LineSeries, DateTime, ITextRenderEventArgs, DataLabel } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, DateTime, DataLabel);
let chart: Chart = new Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
},
//Initializing Chart Series
series: [
{
type: 'Line',
dataSource: [
{ x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
{ x: new Date(2007, 0, 1), y: 0 }, { x: new Date(2008, 0, 1), y: 38 },
{ x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
],
xName: 'x', width: 2, marker: {
dataLabel : { visible: true },
visible: true,
width: 10,
height: 10
},
yName: 'y', name: 'Germany',
}
],
//Initializing Chart title
title: 'Inflation - Consumer Price',
textRender: (args: ITextRenderEventArgs) => {
args.cancel = args.point.y === 0;
}
width:'650px',
height: '350px'
},'#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="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<div id='loader'>Loading....</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">
<div id='container'>
<div id='element' style="width:350px; height:350px;float:left">
</div>
<label id="lbl"></label>
</div>
</div>
<div class="col-sm-4" style="width:200px; height:350px;float: right">
<div id='Grid'>
</div>
</div>
</div>
</div>
</body>
</html>