How to use an npm package (chart.js) once installed? - laravel

Question

I'm making a practice Laravel site, and I've installed chart.js via npm install.
This is a dumb questions but now how do I use it (or anything installed via npm) from here?
The files are installed in the node modules folder. Am I supposed to reference them files using tags in my page headers?
If I do:
<script type="text/javascript" src="/node_modules/chart.js/dist/Chart.min.js"></script>
Then it works, I can get a chart to appear. But this doesn't feel right. Isn't npm supposed to take care of all that automatically?

Answer 1

What you're doing in your code snippet is importing the package for global use. NPM is more of a package manager (Node Package Manager) that installs packages and manages dependencies.
So to answer your question, no NPM doesn't usually handle that automatically. What you're doing is one way of accessing/importing the package once its installed. Another way would be https://docs.npmjs.com/using-npm-packages-in-your-projects .

Answer 2

Laravel makes use of webpack aka Laravel Mix where you can copy files as well. For example jQuery:
mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/js/jquery.min.js');
Then on the page where you need to js/css you can make use of stacks where you can
#push('js')
<script src="/js/Chart.bundle.min.js"></script>
#endpush
to include your script. Just run npm run dev on development and npm run prod if you are ready to upload. If you use version control, don't forget to add files copied by Laravel Mix in your public css and js folders.

Answer 3

Chart.js does not seem to be friendly for npm users, in version 3 you need to register chart elements, because of tree shaking. This is an example with chart.js#3.6.1
HTML
<div style="width: 600px;">
<canvas id="myChart"></canvas>
</div>
JS
import { Chart, LinearScale, BarElement, BarController, CategoryScale } from 'chart.js';
Chart.register(LinearScale, BarElement, BarController, CategoryScale);
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
The result