Plugin data-labels causing stack trace and failing to load chart (KR 5.7.0)

We have been trying to implement data labels and have found that the chart will often not load, and is reproducable from the PHP script below. This has been tested in Microsoft Edge and Google Chrome, both on Windows, latest versions of each.

And here is the stacktrace in the browser when the plugin fails to load:

Uncaught TypeError: Cannot read property 'helpers' of undefined
at chartjs-plugin-datalabels.min.js:7
at chartjs-plugin-datalabels.min.js:7
at chartjs-plugin-datalabels.min.js:7

KoolReport.js:106 ReferenceError: ChartDataLabels is not defined
at overview.php:118
at overview.php:118
at KoolReport.js:105
at Array.forEach (<anonymous>)
at Object.checkScriptsAndCallback (KoolReport.js:102)
at Object.onScriptLoaded (KoolReport.js:88)

From what I can tell, this appears to be because KoolReport's client JS is loading the files in the wrong order (maybe because it's loading in parallel?). The plugins require ChartJS to be loaded first, so this causes issues when trying to use them. Unfortunately, this also means that we cannot use these plugins consistently, making our charts harder to use since we cannot use utilities like the zoom plugin. It seems it is consistent by using SHIFT+F5 to refresh with cache clear, but refreshing enough times will eventually cause the issue again.

Here is an example PHP script that can repro this issue with:

<?php

require_once "../Assets/koolreport/core/autoload.php";

use \koolreport\chartjs\BarChart;

BarChart::create(array(
    "plugins" => array("datalabels"),
    "columns" => array(
        "category" => array(),
        "F.T.T." => array(
            "config" => array(
                "backgroundColor" => "#00CC00",
                "borderColor" => "#00CC00",
                "borderWidth" => 0
            )
        ),
        "R.F.T." => array(
            "config" => array(
                "backgroundColor" => "#FFB020",
                "borderColor" => "#FFB020",
                "borderWidth" => 0
            )
        ),
        "Failures" => array(
            "config" => array(
                "backgroundColor" => "#FF3333",
                "borderColor" => "#FF3333",
                "borderWidth" => 0
            )
        )
    ),
    "options" => array(
        "responsive" => true,
        "maintainAspectRatio" => false,
        "scales" => array(
            "yAxes" => array(
                array (
                    "afterFit" => "function(scaleInstance) {
                        scaleInstance.width = 250;
                    }"
                )
            )
        )
    ),
    "dataStore" => array(),
    "stacked" => true,
    "dataSource" => array(
        array(
            "F.T.T." => 42,
            "R.F.T." => 94,
            "Failures" => 130,
            "category" => "UK Site A R.F.T. (72.3% (94 of 130))"
        )
    )
));

Nick, super thanks for your feedback together with easily replicated code and reasoning! We agree this is a bug with loading Chartjs' plugins. We will fix this in the next version of Chartjs package. Meanwhile you could try this patch yourself and see if it works:

Open the file koolreport/chartjs/Chart.php and replace the following lines:

        $js = array("Chart.bundle.min.js", "chartjs.js");
        if($this->plugins)
        {
            foreach($this->plugins as $name)
            {
                if(is_string($name) && isset($maps[$name]))
                {
                    foreach($maps[$name] as $jsfile)
                    {
                        array_push($js,$jsfile);
                    }
                }
            }
        }

with these ones:

        $jsPlugins = [];
        if($this->plugins)
        {
            foreach($this->plugins as $name)
            {
                if(is_string($name) && isset($maps[$name]))
                {
                    foreach($maps[$name] as $jsfile)
                    {
                        array_push($jsPlugins,$jsfile);
                    }
                }
            }
        }
        $js = array("Chart.bundle.min.js", "chartjs.js", $jsPlugins); //plugins are in the 2nd level files, which will be loaded after the 1st level files

KoolReport's Forum

Plugin data-labels causing stack trace and failing to load chart (KR 5.7.0) #2297

Build Your Excellent Data Report