score:2

i also ran into this problem where i wanted to chart.js charts as an image. i built a web service that takes a chart.js config and returns a png image.

the service is called quickchart and it's open source.

take a chart.js config like this:

{
  type: 'bar',
  data: {
    labels: ['january', 'february', 'march', 'april', 'may'],
    datasets: [{
      label: 'dogs',
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: 'cats',
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}

and put it into a url:

https://quickchart.io/chart?c={type:'bar',data:{labels:['january','february','march','april','may'],datasets:[{label:'dogs',data:[50,60,70,180,190]},{label:'cats',data:[100,200,300,400,500]}]}}

the /chart endpoint returns this png:

example image chart

don't forget to url encode the chart config. to use this in php, use the urlencode function to encode the chart definition:

$chart = "{
  type: 'bar',
  data: {
    labels: ['january', 'february', 'march', 'april', 'may'],
    datasets: [{
      label: 'dogs',
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: 'cats',
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}";

$encoded = urlencode($chart);
$imageurl = "https://quickchart.io/chart?c=" . $encoded;

// embed $imageurl in your email

Related Query

More Query from same tag