title: using react-chartjs-2 , How can I save my chart as png using a download button
body: <p>I'm trying to download my chart.js charts as png using a button Onclick, but I have no idea how I'm going to achieve this , I've went through this answer <a href="https://stackoverflow.com/questions/62039681/react-chartjs-2-doughnut-chart-export-to-png">React-chartjs-2 Doughnut chart export to png</a> but it wasn't quite clear enough for me as I'm quite new in chart.js  don't know how I'm going to connect those variables with my button.</p>
  <pre><code>import React from 'react';
  import { Component, useRef } from 'react';
  import { Bar } from 'react-chartjs-2';
  import 'chartjs-plugin-datalabels';
  
  const data = {
    labels: ['Finance &amp; Business', 'Mining', 'Community Services', 'Electricity', 'Agriculture', 'Construction', 'Manufacture', &quot;Trade &amp; Tourism&quot;, &quot;Transport &amp; Logistics&quot;],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: [&quot;#3283FC&quot;, &quot;&quot;, &quot;&quot;, &quot;#00C0C8&quot;, &quot;#C0BD00&quot;, &quot;#3A46B1&quot;, &quot;#00A150&quot;, &quot;#FEB200&quot;, &quot;#9302a1&quot;],
        borderWidth: 1,
        hoverBackgroundColor: 'rgba(255,99,132,0.4)',
        hoverBorderColor: 'rgba(255,99,132,1)',
        data: [0.6, 0.0, 0.0, -0.1, -0.1, -0.3, -0.3, -0.6, -1.0],
      }
    ]
  };
  
  
  class StackedBar extends Component {
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;h2&gt;Bar Example (custom size)&lt;/h2&gt;
          &lt;Bar
  
            data={data}
            options={{
              plugins: {
                datalabels: {
                  display: true,
                  color: '#fff'
                }
              },
              title: {
                display: true,
                text: 'Contribution Percentage',
                position: 'left'
              },
              maintainAspectRatio: true,
              scales: {
                xAxes: [{
  
                  stacked: true,
                  gridLines: {
                    borderDash: [2, 6],
                    color: &quot;black&quot;
                  },
                  scales: {
                  }
                }],
                yAxes: [{
                  ticks: {
                    beginAtZero: true,
                    steps: 0.5,
                    stepSize: 0.5,
                    max: 1.5,
                    min: -1.0
  
                  },
                }]
  
              },
  
            }}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  export default StackedBar;
  
  </code></pre>