[Chartjs]-How to install chartjs on laravel 6 via npm

3👍

Install the package:

npm install chart.js

Make a file called something like /resources/js/mychart.js:

import Chart from 'chart.js/auto';

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    // ...
});

In your /resources/js/app.js, add the following, at the top:

import './mychart.js';

Now run your build, to compile your JavaScript into one file.

npm run dev

Laravel Mix, will already have a line for compiling the app.js file.

Now whenever you reference /public/js/app.js, your chart will be included there too.

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

If you’d like a separate file, then change your webpack.mix.js file to this:

mix.js('/resources/js/chart.js', 'public/js');

And remember to remove it from the imports in the /resources/js/app.js file.

Leave a comment