Menu
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?
481
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.
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
