CODEWITHSUNDEEP
plotchart.js
backspaces
backspaces

Reputation: 3942

How do I import chartjs as an es6 module?

I have a couple of repos for agent based modeling and would like to use a plotting/charting library for viewing the data they create.

I've used chartjs but I'm not sure I can import it. I'm not using webpack browserify etc, just vanilla es6. I do use rollup to build variations in my repos: cjs for node, single file es6, and iife for scripts. But no build system other than npm run scripts. https://medium.com/@backspaces/es6-modules-part-1-migration-strategy-a48de0b7f112

Given that minimalist environment:

* How to I import chart.js? I'm currently using their CDN
* If that is impossible, what other charting library *is* importable?

Upvotes: 4

Views: 3347

Answers (1)

Korexio
Korexio

Reputation: 483

I'm pretty new to the whole JS module stuff but had the exact same problem. I got it working using the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Load Chart.js as ES2015 module</title>
    <script type="module">
      import 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js'
      
      const canvas = document.getElementById("chart");
      let chart = new Chart(canvas, {
        type: "line",
        data: {
          labels: ["1", "2", "3", "4", "5"],
          datasets: [{
            label: "Series 1",
            data: [1, 2, 3, 2, 1]
          }]
        }
      });
    </script>
  </head>
  <body>
    <canvas id="chart"></canvas>
  </body>
</html>

The problem I'm facing now is that the TypeScript compiler gives me the following error:

'Chart' refers to a UMD global, but the current file is a module. Consider adding an import instead.

But this is not an issue if you are not using TypeScript and the JS code above works in browsers.

Upvotes: 2

Related Questions