Search results

Prevent the data label when the data value is 0

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,

Source
Preview
index.js
index.html
var 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: 36 }, { 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',
        },
        {
            type: 'Line',
            dataSource: [
                { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },
                { x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },
                { x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 }
            ],
            xName: 'x', width: 2, marker: {
                dataLabel: { visible: true },
                visible: true,
                width: 10,
                height: 10
            },
            yName: 'y', name: 'India',
        }
    ],
    //Initializing Chart title
    title: 'Inflation - Consumer Price',
    selectionMode: 'Series',
    tooltip: { enable: true },
    tooltipRender: function (args) {
        var series = (args.series);
        if (series.seriesElement.classList[0] === 'element_ej2_deselected') {
            args.cancel = true;
        }
    },
    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="http://npmci.syncfusion.com/packages/development/material.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>
 
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>