JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<canvas id="chart" width=600 height=600></canvas>

<img id="image_tag" src="">

JavaScript

const myChart = new Chart(document.getElementById('chart').getContext("2d"), {
  type: 'horizontalBar',
  data: {
    labels: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'],
    datasets: [{
      label: 'My data',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }]
  },
  options: {
    animation: {
      onComplete: function () {
        console.log(myChart.toBase64Image());
      },
    },
  }
});
document.getElementById('image_tag').src = myChart.toBase64Image();