Good chart libraries (with image url option) for javascript

by

👍: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

Leave a comment