Empty points in EJ2 JavaScript Accumulation chart control

5 Sep 202513 minutes to read

The data points those uses the null or undefined as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the emptyPointSettings property in series. The default mode of the empty point is Gap. Other supported modes are Average and Zero.

import { AccumulationChart, AccumulationDataLabel } from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationDataLabel);

let piechart: AccumulationChart = new AccumulationChart({
    series: [
        {
            dataSource: [{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 }, { x: 'Mar', y: undefined }, { x: 'Apr', y: 13.5 },
            { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 }, { x: 'Jul', y: null }, { x: 'Aug', y: 25 },
            { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }],
            xName: 'x',
            yName: 'y',
            emptyPointSettings: { mode: 'Zero', fill: 'pink'},
            dataLabel: { visible: true, position: 'Outside' }
        }
    ]
}, '#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/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></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>

Customization

Specific color for an empty point can be set by using the fill property in emptyPointSettings and the border for an empty point can be set by using the border property.

import { AccumulationChart } from '@syncfusion/ej2-charts';
let piechart: AccumulationChart = new AccumulationChart({
    series: [
        {
            dataSource: [{ x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 }, { x: 'Mar', y: undefined }, { x: 'Apr', y: 13.5 },
            { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 }, { x: 'Jul', y: null }, { x: 'Aug', y: 25 },
            { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }],
            emptyPointSettings: { mode: 'Average', fill: 'pink' },
            xName: 'x',
            yName: 'y'
        }
    ]
}, '#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/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></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>

Handling No Data

When no data is available to render in the accumulation chart, the noDataTemplate property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.

var chartData = [{ x: 'English', y: 48.20, text: '18.20%' },
{ x: 'Sanskrit', y: 27.3, text: '27.3%' },
{ x: 'French', y: 27.3, text: '27.3%' },
{ x: 'Tamil', y: 55.9, text: '55.9%' },
{ x: 'Maths', y: 76.8, text: '76.8%' },
{ x: 'Chemistry', y: 86.8, text: '76.8%' },
{ x: 'Biology', y: 96.8, text: '76.8%' },
{ x: 'Physics', y: 100, text: '100%' }];
var checked = false;

var piechart = new ej.charts.AccumulationChart({
    series: [{
        type: 'Pie', xName: 'x', yName: 'y', animation: { enable: true },
    }],
    tooltip: { enable: true },
    noDataTemplate: '<div id="noDataTemplateContainer" class="light-bg">' +
        '<div class="template-align">' +
        '<img src="no-data.png" alt="No Data"/>' +
        '</div>' +
        '<div class="template-align">' +
        '<p style="font-size: 15px; margin: 10px 0 0;"><strong>No data available to display.</strong></p>' +
        '</div>' +
        '<div class="template-align">' +
        '<button id="loadDataBtn" style="margin-top: 15px;"></button>' +
        '</div>' +
        '</div>',
    legendSettings: { visible: true },
    title: 'Pie Annotation CoordinateUnits Point',
    titleStyle: { textOverflow: 'Trim' },
    loaded: function (args) {
        var btnElem = document.getElementById('loadDataBtn');
        if (btnElem) {
            var loadBtn = new ej.buttons.Button({
                content: 'Load Data',
                iconCss: 'e-icons e-refresh',
                cssClass: 'e-outline',
                isPrimary: false
            });
            loadBtn.appendTo(btnElem);

            loadBtn.element.addEventListener('click', function () {
                checked = !checked;
                if (checked) {
                    piechart.series[0].dataSource = chartData;
                }
                piechart.refresh();
            });
        }
    }
}, '#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">
    <style>
    #noDataTemplateContainer {
        height: inherit;
        width: inherit;
    }
 
    .load-data-btn {
        border-radius: 4px !important;
        text-transform: none !important;
    }
 
    .light-bg {
        background-color: #fafafa;
        color: #000000;
    }
 
    .template-align img {
        max-width: 150px;
        /* Adjust size as needed */
        max-height: 150px;
        margin-top: 55px;
    }
 
    .template-align {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></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>