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.
Source:stackexchange.com