How to install Chart.js in Laravel?

Question

I want to install Chart.js in my Laravel projects. Using npm install, a config for Webpack, and seeing my index page with some Chart.js examples. On my first try, I got this error in the browser. Maybe I'm not configuring the webpack correctly?

Uncaught ReferenceError: Chart is not defined at (index):134

So I copied and pasted this require that I found on Chart.js doc integration.

require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

I got this error on npm run dev.

ERROR in ./resources/js/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/sa/laravelproject/resources/js/app.js: Unexpected token (37:37)

35 | 36 | require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){

37 | var myChart = new Chart(ctx, {...}); | ^ 38 | });

Answer 1

Run this from command line:

npm install chart.js

Add this line in webpack.mix.js:

mix.copy('node_modules/chart.js/dist/chart.js', 'public/chart.js/chart.js');

Then run this from command line:

npm run dev

In the blade you want the chart on:

<script src="{{ asset('chart.js/chart.js') }}"></script>
<canvas id="myChart" width="500" height="200"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, { 
  ...
  }
</script>

Answer 2

You can register a global Chart variable in app.js like this:

// Chart JS
import Chart from 'chart.js/auto';
window.Chart = Chart;

And then you can use it in the views or in the other JS files with new Chart(....)

Answer 3

I am having the some problem.

First I can't bring the library via NPM. I installed it, then I execute "npm run dev". But when I call it in the app it says

1:2573 Uncaught ReferenceError: Chart is not defined
    at 1:2573

If I call it from a CDN, it conflicts with somethig of VUE or Bootstrap. Because it doesn't work. Except that I erase "defer" word from line from app.blade.php:

    <script src="{{ asset('js/app.js') }}" defer></script>

But again, only calling Charts.Js by CDN. Can't bring it from NPM.

Hoping somebody has the same problem. Thank you. Hernán.

Answer 4

The @Magmatic answer is close.

For newer version like i use v4.x. Revise a bit at:

mix.copy('node_modules/chart.js/dist/chart.umd.js', 'public/js/chart.js');

Add another to hide error notice:

mix.copy('node_modules/chart.js/dist/chart.umd.js.map', 'public/js/chart.umd.js.map'); mix.copy('node_modules/chart.js/dist/helpers.js.map', 'public/js/helpers.segment.js.map');

Answer 5

I would use this library https://github.com/ConsoleTVs/Charts.

Run...

composer require consoletvs/charts

Then publish the config file:

php artisan vendor:publish --tag=charts_config

In config/charts.php, specify your chart type:

'default_library' => 'Chartjs',

Install:

npm i chart.js

From there follow the instructions on creating a chart.

https://charts.erik.cat/create_charts.html#create-a-chart-class

Answer 6

Hoping this will be of value to someone. Using livewire v3 with AlpineJS the trick ended up being:

1. Add the following to resources/js/bootstrap.js

   import Chart from 'chart.js/auto';

   window.Chart = Chart;

2. Including script in blade but most importantly adding type="module" to opening script tag:

@push('scripts')
    <script type="module">
        var ctx = document.getElementById('testChart');
        var testChart = new Chart(ctx, {
            type: 'bar',
            data: {!! json_encode($data) !!},
        });
    </script>
@endpush