Comments (9)
mukham12
commented on May 27, 2024
May be similar to #10915.
from chart.js.
hfingler
commented on May 27, 2024
Just found the same issue and, following the issue mentioned above, solved it by linking the version with "umd" in its name. For example, <cdn>/Chart.js/4.4.0/chart.umd.min.js
from chart.js.
Pomax
commented on May 27, 2024
@mukham12 that's a server-side issue though, so probably caused by something else.
@hfingler that's not really a solution if you're writing modern JS with ES modules, though. UMD exports are incompatible with ESM, You just end up importing a module that has no exports, which means you still can't do anything.
(open dev tools, and run import("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js").then(module => console.log(module)); for example. You'll see it succeed because the JS file exists, but you'll also see it show an empty module)
from chart.js.
hfingler
commented on May 27, 2024
Good point. I'm working on a small, simple project, so that was enough for me.
from chart.js.
Pomax
commented on May 27, 2024
Same, but I'm only working in modern JS these days (both in the browser and in Node), so it has to be ESM-loadable.
from chart.js.
ludgerh
commented on May 27, 2024
This does not work nether, even with a very simple example page, basically slightly varied from the first step in the tutorial. I am using Django and had no problem with the version 3. I would prefer not to get back to this version for the new project. Now I get (the server from the browsers error message is my static files server, I have no idea, why/how Firefox looks there):
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: https://myserver.de/sh2/js/chart.umd.js
Source-Map-Adresse: chart.umd.js.map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
console.log(Date.now());
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
from chart.js.
ludgerh
commented on May 27, 2024
...found an easy solution that works for me:
from chart.js.
Pomax
commented on May 27, 2024
@ludgerh that's a different version with a different problem, though. I've updated the title, but for this particular it'll be better to delete those comments and file a separate one.
from chart.js.
devlaam
commented on May 27, 2024
Imagine you are selecting a JS lib do charting for your project and try to run some simple tests in the browser. This bug is a complete dealbreaker. "Moving on to then next lib ... ". Surly hope this is fixed soon.
from chart.js.
Related Issues (20)
- Title padding does not appear to be scriptable (or type needs updating?)
- Provide an API using composition DP to build graphs
- Vertical Gradient to each bar are not able to set grouped Bar chart. (Sets the createLinearGradient for the whole graph, not for individual bars). HOT 2
- Tooltip content is not hoverable
- Dynamic text resize is not supported HOT 3
- Mix multiple bar and line HOT 2
- Issue with Updating Charts -> Adding or Removing Data code example HOT 4
- Set label of piechart/donut chart using parsing
- Minor ticks support chart.js
- Line chart rendering goes haywire
- Chrome 124 - Charts disappearing after switching tabs HOT 11
- How to apply gradient on the opposite side of the Line chart? HOT 1
- Proper config is not provided HOT 2
- The callback is not working as expected for x-Axis HOT 2
- Add ability to lock aspect ratio of the grid, ignoring title and labels
- How can I click outside and trigger the onClick of legend event? HOT 3
- Radial angleLines not displayed when reversed
- Adding configuration to `y` scale produces point shift in scatter type dataset
- Tooltip: customize point style (like in legend plugin)
- Help with removing padding on Y-axis when y-axis ticks are hidden with ticks {display:false} in configuration. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chart.js.