Chart.js

How Chart.js Charts Are Rendered

Chart.js uses a configuration object that defines the chart type, data, and options. Our service generates HTML with your Chart.js configuration and renders it to an image.

Example 

const chartConfig = {
    type: 'bar',
    data: {
        labels: ['A', 'B', 'C'],
        datasets: [{
            data: [1, 2, 3]
        }]
    },
    options: {
        responsive: true
    }
};

When you send this configuration to our API, it gets embedded into our HTML template like this:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
  </head>
  <body>
    <canvas id="chart"></canvas>
    <script>
      const ctx = document.getElementById('chart')
      new Chart(ctx, [your config])
    </script>
  </body>
</html>

API Usage

Use Chart.js configurations with the charts.land API by setting library.name to "chartjs" and providing your chart configuration in the config field.

{
  "library": {
    "name": "chartjs",
    "version": "4.4.0"
  },
  "config": {
    // Your Chart.js configuration object goes here
  },
  "output": {
    "format": "png",
    "width": 800,
    "height": 600
  }
}

Resources