Using Chart.js in Chrome Extensions #11024
Replies: 2 comments 1 reply
-
|
Maybe try using chart.umd.js instead (and without the "module")? |
Beta Was this translation helpful? Give feedback.
-
|
Appreciate the suggestion @kurkle! I tried this and it still returns the following in the console:
|
Beta Was this translation helpful? Give feedback.
-
|
Bit of context: I had a Hackathon this weekend and wanted to use Let's look at how one would try to import You should be able to import it using a cdn script followed by a script tag with the code (as referenced here), for instance: <!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="chart"></canvas>
<!-- Notice how the script is after the DOM definition, so that document.getElementById(...) actually finds the elements in the dom -->
<script>
const chart = document.getElementById("chart");
new Chart(chart, {
type: "bar",
data: {
labels: ["Red"],
datasets: [
{
label: "# of Votes",
data: [1],
borderWidth: 1,
},
],
},
});
</script>
</body>
</html>However, if you want to import it as a module, you'll have to install the package. You can do this by running The docs then say to write <script src="src/script1.js" type="module"></script>Once that's done, you'll probably get this error in your console: Note: If you get the Now going back to the Let's take a look at where the Simply replacing the import statement with Testing it out leaves me with the very same error, but for a different import statement (yay?!): Let's see where We First, we need to find the right file to import (currently, we're simply trying to import Here's a quick rundown through some that you may come across:
As we are using Replacing the import statement there as well with an absolute one allows me to I know it's not a good solution (having to manually change the import definitions from within an installed package is not an acceptable solution I'd say, neither is writing these massive paths), but I hope that by hacking it together, you learnt something! I'll be looking into bundlers in the near future, to see how they work, I'll post an update if I figure them out 👍 . Update: You can simply do Update 2: Apparently they have a CDN with a <!-- In your index.html -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js></script>
<script src="your_script.js" type="module"></script>// your_script.js
new Chart(...)Note: If you install [email protected], you won't have to make changes within the |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I've seen posts by folks citing their use of Chart.js in their Chrome Extension. When I try to use Chart.js I get an insurmountable number of errors that in conjunction with the complexity of Chart.js, quickly exceed my understanding of JavaScript.
I’m working with the basic files and no fancy building tools or repositories. In my .html file, I include the following (appears as though this is the method for Chrome Extensions?):
<script type="module" src="chartjs/chart.js"></script>I also include color:
<script type="module" src="chartjs/color/index.js"></script>The module type helped with immediate errors but was quickly replaced by these in the console:
Any suggestions on where I went wrong or how I could get to a working version of Chart.js and enjoy the creation of what appears to be amazing charts?
Beta Was this translation helpful? Give feedback.
All reactions