Good chart libraries (with image url option) for javascript

Question

I'm currently using quickchart.js to embed an image with a large set of data. The problem is that my data exceeds the limit which means quickchart won't generate an image link for me.

Error: https://quickchart.io/chart/render/sf-6b25bdc2-5ea1-4773-bb4f-af8d020b4f64

What are some other good libraries that I can use (with js) that generate an image link for the chart?

Another thing that I would like to clarify is that a short url is required, which is why I'm using quickchart in the first place. I've tried generating the long link (JSON parsed) but long urls are not allowed even as the source for an image.

Answer 1

well if you run chart.js yourself and the just use toBase64Image that shouldnt limit your data set here is an example

let element = document.createElement("canvas")
document.body.append(element);
let ctx = element.getContext('2d');
let chart = new Chart(ctx, {
  type: 'line',
  data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
  label: 'My First dataset',
  backgroundColor: 'rgb(255, 99, 132)',
  borderColor: 'rgb(255, 99, 132)',
  data: [0, 10, 5, 2, 20, 30, 45]
}]
  }
});

let base64Image = chart.toBase64Image().replace("image/png", "image/octet-stream");
let link = document.createElement('a')
link.setAttribute('href',base64Image)
 link.setAttribute('download', 'myChart.png');
link.innerHTML = "Link to image";
document.body.append(link)
element.remove()
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

And you can of course host the image where ever you want Edit: changed it to provide a link instead to download the image

Edit2: stackoverflow has blocked downloads so you have to open the link in a new tab to download the image and don't forget to add .png