Chartjs-How to get the image from graph created using chartjs

You can definitely use toDataURL or the built-in Chart.js function toBase64Image. The answers here pretty much cover how to do that. This may be enough, especially if your use case is entirely within the browser.

The downside is that you can’t script this easily with wget or curl, as you mentioned.

A solution to this problem is to use a chart rendering service like QuickChart, which is an open source project I built that renders Chart.js graphs to image.

Take your chart config and stuff it into the API URL (this uses a public endpoint, but you can host it yourself too):

https://quickchart.io/chart?c={ type: ‘bar’, data: { labels: [“1900”, “1950”, “1999”, “2050”], datasets: [ { label: “Australia”, backgroundColor: “#3e95cd”, data: [130,212,252,241] }, { label: “Asia”, backgroundColor: “#8e5ea2”, data: [348,705,1075,2034] } ] }, options: { title: { display: true, text: ‘Population growth (millions)’ } }}

By default, this URL produces the following PNG image:

The QuickChart/Chart.js sandbox is a good way to test how your Chart.js config renders to an image.

You can use curl or wget to fetch the URL-encoded chart directly. The URL is a mouthful, but it includes your entire chart config (note that it is URL encoded):

curl -o mychart.png 'https://quickchart.io/chart?bkg=white&c=%7B%0A%20%20%20%20type%3A%20%27bar%27%2C%0A%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20labels%3A%20%5B%221900%22%2C%20%221950%22%2C%20%221999%22%2C%20%222050%22%5D%2C%0A%20%20%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20label%3A%20%22Australia%22%2C%0A%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%22%233e95cd%22%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%5B130%2C212%2C252%2C241%5D%0A%20%20%20%20%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20label%3A%20%22Asia%22%2C%0A%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%22%238e5ea2%22%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%5B348%2C705%2C1075%2C2034%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20options%3A%20%7B%0A%20%20%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20%20%20text%3A%20%27Population%20growth%20(millions)%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D'