neverbounce / chartjs-plugin-empty-overlay Goto Github PK

The function isChartEmpty throws a type error when validating data that has gaps, or, null values. The error originates during the first filter of isChartEmpty, TypeError: Cannot read property 'X' of null. The data I'm using is a mix of integers and null values. e.g., [3, 6, null, 12].

Null data means no data, right? Not necessarily. Null is a proper way to represent a gap in the data.
For example, showing run times for a given task. If a point does not have a time value, a value of zero would indicate that the given task took literally no time. Null would indicate that the task did not finish, resulting in a gap in the data.

I'm not sure what Chart.js supported when this plugin was created, but Chart.js currently allows gaps during rendering when a specific property is set. (see Dataset Properties -> spanGaps) Even if spanGaps is not enabled, Chart.js will attempt to skip gaps, effectively merging data around a given gap.

So my bug report-slash-feature request is gap support. If the spanGaps property is set in the Chart.js config (globally or on an individual dataset), allow nulls in the data.

Hello!
Please add a screenshot with an example of the overlay to README.md.

not working with chartjs 3.5
have some errors with 'global' and functions

Codebase for update plugin to chartjs 3.x

function checkIsEmpty(chart) {
    if (chart.config.type == "doughnut") {
        var values = chart.data.datasets[0].data;
        if (values.length == 0) {
            return true;
        }

        for (i = 0; i < values.length; i++) {
            if (values[i] != 0) {
                return false;
            }
        }

        return true;
    }

    return chart.data.datasets[0] == null || chart.data.datasets[0].data.length === 0;
}
Chart.register({
    id: 'overlay',
    afterDraw: (chart, args, opts) => {
        if (checkIsEmpty(chart)) {
            var ctx = chart.ctx;
            ctx.save();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = "22px Arial";
            ctx.fillStyle = "gray";
            ctx.fillText('Sem dados', chart.width / 2, chart.height / 2);

            ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
            ctx.fillRect(0, 0, chart.width, chart.height);
            ctx.restore();
        }
    }
});

I create this source code, inspired into plugin.