Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How do I install Chart.js as a file?
I'm trying to replace Flot.js with Chart.js. In my application, Flot.js is included as a normal JavaScript file, like so:
<script language="javascript" type="text/javascript" src="jquery.flot-0.8.3.js"></script>
I'm looking for a way to do the same for Chart.js.
The releases section of the Chart.js GitHub page has packages available for download. From its v4.4.0 .tgz package, for example, I found the package/dist/chart.js file and included it in my application. After doing so, the console reports the error
Uncaught SyntaxError: import declarations may only appear at top level of a module chart.js:7:1
(In fact, the very first non-comment line of chart.js is an import statement:
/*!
* Chart.js v4.4.0
* https://www.chartjs.org
* (c) 2023 Chart.js Contributors
* Released under the MIT License
*/
import { r as requestAnimFrame, a as resolve, e as effects, c as color, i as isObject, d as defaults, b as isArray, v as valueOrDefault, u as unlistenArrayEvents, l as listenArrayEvents, f as resolveObjectKey, ...
so I'm not certain what to make of this error. Is chart.js not the top level of the chart.js module? If not, what is?)
In addition, when I insert the "Hello world" example given in the Chart.js docs, no chart is created on the page and the console additionally reports the error
Uncaught ReferenceError: Chart is not defined
I found similar files available via a CDN page. These files appear to be equivalent in content to the package files from the Chart.js GitHub, and when I include them in my application I get the same result.
I have found similar questions on Stack Overflow here, where the only useful answer doesn't provide any more detail than what I've already tried, and here, where the only answer is to use the CDN, which is not what I'm looking for.
Is there a way to incorporate Chart.js as a first-party file?
1 answer
The following users marked this post as Works for me:
| User | Comment | Date |
|---|---|---|
| CavanWright | (no comment) | Oct 12, 2023 at 14:33 |
If you're not importing it as a module but just including it through a <script> tag, you can't use the regular file. You'll need to use the UMD file instead. You can either include it from a CDN (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js), or download that file, rehost it, and include it in a <script> tag. Then you can just call new Chart() in a subsequently loaded script.
This version of Chart.js has extra code at the beginning to detect how it's being loaded and to run appropriately.
0 comment threads
1 comment thread