Empty Points in ASP.NET CORE Accumulation Chart Component

4 Sep 202510 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.

@{
    List<EmptyPointsChartData> chartData = new List<EmptyPointsChartData>
    {
        new EmptyPointsChartData { xValue = "Rice",  yValue = 80   },
        new EmptyPointsChartData { xValue = "Wheat", yValue = null },
        new EmptyPointsChartData { xValue = "Oil",   yValue = 70   },
        new EmptyPointsChartData { xValue = "Corn",  yValue = 60   },
        new EmptyPointsChartData { xValue = "Gram",  yValue = null },
        new EmptyPointsChartData { xValue = "Milk",  yValue = 70   },
        new EmptyPointsChartData { xValue = "Peas",  yValue = 80   },
        new EmptyPointsChartData { xValue = "Fruit", yValue = 60   },
        new EmptyPointsChartData { xValue = "Butter",yValue = null }
    };
}

<ejs-accumulationchart id="container" title="Annual Product wise Profit Analysis">
    <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Profit">
            <e-accumulationseries-datalabel name="text" visible="true" position="Outside">
            </e-accumulationseries-datalabel>
            <e-accumulationseries-emptypointsettings mode="Zero" fill="red"></e-accumulationseries-emptypointsettings>
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class EmptyPointsChartData
{
    public string xValue;
    public Nullable<double> yValue;
}

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.

@{
    List<EmptyPointsChartData> chartData = new List<EmptyPointsChartData>
    {
        new EmptyPointsChartData { xValue = "Rice",  yValue = 80   },
        new EmptyPointsChartData { xValue = "Wheat", yValue = null },
        new EmptyPointsChartData { xValue = "Oil",   yValue = 70   },
        new EmptyPointsChartData { xValue = "Corn",  yValue = 60   },
        new EmptyPointsChartData { xValue = "Gram",  yValue = null },
        new EmptyPointsChartData { xValue = "Milk",  yValue = 70   },
        new EmptyPointsChartData { xValue = "Peas",  yValue = 80   },
        new EmptyPointsChartData { xValue = "Fruit", yValue = 60   },
        new EmptyPointsChartData { xValue = "Butter",yValue = null },
    };
}

<ejs-accumulationchart id="container" title="Annual Product wise Profit Analysis">
    <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Profit">
            <e-accumulationseries-datalabel name="text" visible="true" position="Outside">
            </e-accumulationseries-datalabel>
            <e-accumulationseries-emptypointsettings mode="Average" fill="red"></e-accumulationseries-emptypointsettings>
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class EmptyPointsChartData
{
    public string xValue;
    public Nullable<double> yValue;
}

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.

<ejs-accumulationchart id="lineContainer" title="Mobile Browser Statistics" load="load" loaded="loaded">
    <e-accumulationchart-legendsettings visible="false">
    </e-accumulationchart-legendsettings>
    <e-accumulation-series-collection>
        <e-accumulation-series xName="x" yName="y" name="Browser">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>
<div id="noDataButtonOverlay" class="no-data-button-overlay" style="display: none;">
    <ejs-button id="loadDataButton" content="Load data" iconCss="e-icons e-refresh" onclick="loadChartData()"
        cssClass="load-data-btn e-outline" isPrimary="false">
    </ejs-button>
</div>

<style>
    .no-data-button-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 60px;
        /* Position below the no-data message */
        z-index: 10;
    }

    #noDataTemplateContainer {
        height: inherit;
        width: inherit;
    }

    .load-data-btn {
        margin-top: 55px;
        border-radius: 4px !important;
    }

    .load-data-btn .e-btn-icon {
        margin-right: 8px;
    }

    .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;
    }

    #control-container {
        padding: 0px !important;
    }
</style>
<script src="~/scripts/chart/theme-color.js"></script>
<script id='No-Data-Template' type="text/x-template">
    <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 10px;"><strong>No data available to display.</strong></p>
        </div>
    </div>
</script>
<script>
    var chartData = [
        { x: "Chrome", y: 37 },
        { x: "UC Browser", y: 17 },
        { x: "iPhone", y: 19 },
        { x: "Others", y: 4 },
        { x: "Opera", y: 11 },
        { x: "Android", y: 12 },
    ];
    var dataLoaded = false;
    function load(args) {
        args.chart.noDataTemplate = "#No-Data-Template";
        args.chart.series[0].dataSource = (dataLoaded ? chartData : []);
    }

    function loaded(args) {
        var buttonOverlay = document.getElementById("noDataButtonOverlay");
        if (buttonOverlay) {
            buttonOverlay.style.display = !dataLoaded ? 'block' : 'none';
        }
    }

    function loadChartData() {
        var chart = document.getElementById('lineContainer').ej2_instances[0];
        var buttonOverlay = document.getElementById("noDataButtonOverlay");
        dataLoaded = true;
        chart.series[0].dataSource = chartData;
        chart.series[0].animation.enable = true;
        if (buttonOverlay) {
            buttonOverlay.style.display = 'none';
        }
        chart.refresh();
    }
</script>
public ActionResult Index()
{

    return View();
}

ASP.NET Core Accumulation Chart Control