Chart to Image

This example shows how to convert a Chart.js chart into an image. This is useful for generating chart images for reports, emails, or social media.

HTML Content

<canvas id="myChart" width="400" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('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.5)',
          'rgba(54, 162, 235, 0.5)',
          'rgba(255, 206, 86, 0.5)',
          'rgba(75, 192, 192, 0.5)',
          'rgba(153, 102, 255, 0.5)',
          'rgba(255, 159, 64, 0.5)'
        ],
        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: {
      animation: false,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

CSS Styles

body {
    margin: 0;
    padding: 16px;
    background: white;
}

canvas {
    display: block;
    margin: 0 auto;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<canvas id=\"myChart\" width=\"400\" height=\"300\"></canvas><script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script><script>const ctx = document.getElementById('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.5)','rgba(54, 162, 235, 0.5)','rgba(255, 206, 86, 0.5)','rgba(75, 192, 192, 0.5)','rgba(153, 102, 255, 0.5)','rgba(255, 159, 64, 0.5)'],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: {animation: false,scales: {y: {beginAtZero: true}}}});</script>",
    "width": 450,
    "height": 350,
    "css": "body { margin: 0; padding: 16px; background: white; } canvas { display: block; margin: 0 auto; }"
}

How it Works

1. We include Chart.js from CDN and create a canvas element
2. The chart is configured with static data and options
3. Animation is disabled to ensure immediate rendering
4. Padding is added around the canvas for better presentation