Ndtyjky

Is there any way I could use Chart.js to create a bar chart directly to a PNG file? I don't want to display the chart on my webpage, I want to send it directly to Facebook Messenger as an image.

I have used the following code to create a bar chart on my webpage:

var ctx = document.getElementById("myChart").msGetInputContext("2d");

                var myChart = new Chart(ctx, {

                    type: 'bar',

                    data: {

                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

                        datasets: [{

                            label: '# of Votes',

                            data: [12, 19, 3, 5, 2, 3],

                            backgroundColor: [

                                'rgba(255, 99, 132, 0.2)',

                                'rgba(54, 162, 235, 0.2)',

                                'rgba(255, 206, 86, 0.2)',

                                'rgba(75, 192, 192, 0.2)',

                                'rgba(153, 102, 255, 0.2)',

                                'rgba(255, 159, 64, 0.2)'

                            ],

                            borderColor: [

                                'rgba(255,99,132,1)',

                                'rgba(54, 162, 235, 1)',

                                'rgba(255, 206, 86, 1)',

                                'rgba(75, 192, 192, 1)',

                                'rgba(153, 102, 255, 1)',

                                'rgba(255, 159, 64, 1)'

                            ],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        scales: {

                            yAxes: [{

                                ticks: {

                                    beginAtZero:true

                                }

                            }]

                        }

                    }

                });

But in this particular case, my users would be interacting with my Node js app through Facebook messenger rather than a webpage. I would need a way to create a chart without needing the html canvas element and I can convert the chart to image using .toBase64Image().

Thanks in advance for any help!

Chart.js is built on the HTML5 canvas element.

To use it on node.js you need to mimic this element in node.

There is a package that try to handle all the needed libraries for this porpuse, you can find it here
chartjs-node

Disclaimer: I’m image-charts founder.

I had the same issue — sending chart images through a messenger bot — I’ve built Image-charts to manage this and make it scale and fast.

https://image-charts.com/chart

    ?cht=p3

    &chs=700x100

    &chd=t:60,40

    &chl=Hello|World

    &chan

    &chf=ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1

You can create image from Canvas using toDataURL, so after charts.js renders the graph into the canvas (myChart)

var canvas = document.getElementById('myChart');

var dataURL = canvas.toDataURL();

dataURL will not contain the base64 string of the image. You can write it to file and use the file or use the string any other way.

Check that reference for converting the string to image file if you will.
https://gist.github.com/madhums/e749dca107e26d72b64d

Hope this is what you mean you needed to do.