[Chartjs]-How to use an npm package (chart.js) once installed?

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 .

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.

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