CODEWITHSUNDEEP
webpackchart.jsvue.js
user1670407
user1670407

Reputation:

How to import Chart.js with Webpack

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.

Upvotes: 18

Views: 26561

Answers (3)

Yichi Xing
Yichi Xing

Reputation: 191

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
)

Upvotes: 18

Brett Elliot
Brett Elliot

Reputation: 962

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

Upvotes: 4

Edgar Froes
Edgar Froes

Reputation: 778

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.

Upvotes: 3

Related Questions