[Chartjs]-How to install and use the Chart.js package locally?

Open your browser’s developer tools. Look at the console. Read the error messages.

Uncaught SyntaxError: import declarations may only appear at top level of a module

chart.js is a module (specifically an ECMAScript module).

Browsers support these under a few conditions:

• ✓ You load the <script> with type="module" (which you didn’t, but this is easily fixed)
• ✓ You load the URL from HTTP(S) and not a file scheme URL (which you didn’t, but this is easily fixed)
• ✓ The module doesn’t depend on APIs not provided by browsers (Chart.js is designed to run in browsers so this is fine)
• ⚠ The import statements use URLs (here is the sticking point, chart.js has import '@kurkle/color'; which depends on Node.js style module resolution).

chart.js is intended to be used in combination with a bundler such as parcel, vite, or webpack — and you aren’t using one of them.

chart.umd.js is the same code presented as a UMD module instead of an ECMAScript module.

This format does a lot of inlining and rewriting so it "just works" in more places (including when loaded in a browser with a regular <script>)

Note that the Chart.js documentation tells you to use the umd version if you aren’t using a bundler.