How to import Chart.js with Webpack

Question

I have a Vue JS project using Webpack and need to import Chart.js. I have tried

// import Chart from 'chart.js/Chart.min.js'

This gives js errors when trying to use the library.

Karlynkarma

Answer 1

After you do npm install chart.js,

You can simply use

import Chart from 'chart.js/auto'

to import the whole of chart.js

If you want to import only some modules/plugins:

import {
  Chart,
  BarController,
  BarElement,
  LinearScale,
  CategoryScale
} from 'chart.js'
Chart.register(
  BarController,
  BarElement,
  LinearScale,
  CategoryScale
)

Karole

Have you found a solution? I met similar error. Thanks. – Archean

Answer 2

Using webpack, I've found that I had to add Chart to the global context like so:

// Ensure the Chart class is loaded in the global context
import Chart from 'chart.js/auto';
window.Chart = Chart

Easley

This did the job ! – Ocreate

Answer 3

As seen on this issue, if you use Angular CLI you only need to add this to the scripts array in angular-cli.json:

"../node_modules/chart.js/dist/Chart.bundle.min.js"

Restart your application, live reload won't do the trick.

Francophobe

Answer 4

I was struggling with all those issues as well, but then I found this answer to a follow-up trouble. It is well explained and it solved my import problems.

Hoban