JS Error: Uncaught ReferenceError: Chart is not defined

[strtob]

Hi,

Unfortunately, it's seems not work, this is my code:

<?php

use practically\chartjs\Chart;

?>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body border-bottom">
                <h4 class="card-title mb-4"><?= $boxTitle ?></h4>

                    <?= Chart::widget([
                        'type' => Chart::TYPE_BAR,
                        'datasets' => [
                            [
                                'data' => [
                                    'Label 1' => 10,
                                    'Label 2' => 20,
                                    'Label 3' => 30
                                ]
                            ]
                        ]
                    ]);
                    ?>
            </div>
        </div>
    </div>
</div>

...and JS console ouput:

Uncaught ReferenceError: Chart is not defined
    <anonymous> http://localhost:8080/:881
    jQuery 2

any idea? :-/

[AdeAttwood]

@strtob how have you installed the chart.js library and what version are you using?

You need to ensure that the Chart object is accessible in the window. Last time I had this issue is when we upgraded to v3 of chart.js. We had to use the below snippet to make it accessible to the window. Documented on the chat.js upgrade guide

import {Chart, LineController, LineElement, Tooltip, BarController, BarElement, CategoryScale, PointElement, LinearScale, Title, ScatterController} from 'chart.js'
Chart.register(LineController, ScatterController, BarController, BarElement, CategoryScale, Tooltip, LineElement, PointElement, LinearScale, Title);
window['Chart'] = Chart;

[jydidier]

Hi ! I had the same JS console output and here is the workaround I found so that it works.

1/ I used the asset packagist in order to import chart.js. However, I found out that, for some reason I do not explain yet, Chart.js came without the dist directory which means that I had to build the library using rollup

2/ the assets were not found by yii so I had to create an asset bundle for it. I created it as a file assets/ChartJSAsset.php within the yii project. The code is as follows:

<?php
namespace app\assets;

use yii\web\AssetBundle;

class ChartJSAsset extends AssetBundle
{
    public $sourcePath = '@bower/chart-js/dist';
    public $js = [
      'chart.js'
    ];
}
?>

3/ In order to force the bundle generation, I had to insert two lines so that it works. On the sample given on the extension page, it would result in this code:

<?php
use practically\chartjs\Chart;

/* the following two lines below 
  * 1/ locate the class describing the asset bundle
  * 2/ register the asset bundle */
use app\assets\ChartJSAsset;
ChartJSAsset::register($this);

/* remaining part of the example */ 
echo Chart::widget([
    'type' => Chart::TYPE_BAR,
    'datasets' => [
        [
            'data' => [
                'Label 1' => 10,
                'Label 2' => 20,
                'Label 3' => 30
            ]
        ]
    ]
]);
?>

As I previously said, this is a workaround. Maybe I did not perform the accurate steps before but the result is that I can use the extension without any further problem.

Hope this helps !

[jakim]

Or if you want to use cdn and not do the js build required in the new version.

class ChartJSAsset extends AssetBundle
{
    public $sourcePath = null;
    public $baseUrl = 'https://cdn.jsdelivr.net/npm/chart.js@3.6.0';
    public $js = [
        ['dist/chart.min.js', 'integrity' => 'sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk='],
    ];
    public $jsOptions = [
        'crossorigin' => 'anonymous',
    ];
}