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>