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?

posted about 1 year ago

CC BY-SA 4.0

CavanWright‭

11 reputation 4 0 2 0