Chart.js Chart & Controllers API Reference

`Chart`

5 methods

The Chart class: constructor that renders to a canvas, the configuration object, and instance update methods.

new Chart(canvas, config)

Creates and renders a chart on the given canvas (or 2d context) using the provided config.

Parameters

Name	Type	Description
canvas	HTMLCanvasElement \| string \| CanvasRenderingContext2D	Canvas element, selector, or context.
config	object	{ type, data, options }.

Returns

Chart

Example

chartjs

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: { labels: ['A', 'B'], datasets: [{ data: [10, 20] }] },
  options: { responsive: true },
});

chart.config

The live configuration object for this chart instance; mutate then call update() to re-render.

Returns

ChartConfiguration

Example

chartjs

chart.config.data.datasets[0].data = [30, 40];
chart.update();

chart.update(mode?)

Re-renders the chart after data or options have changed. mode controls animation ('none' to skip).

Parameters

Name	Type	Description
mode	string	Optional: 'none', 'reset', 'resize', 'show', 'hide', 'normal', 'active'.

Returns

void

Example

chartjs

chart.data.labels.push('C');
chart.data.datasets[0].data.push(30);
chart.update();

chart.destroy()

Destroys the chart instance, removing all event listeners and clearing the canvas. Call before reusing the canvas.

Returns

void

Example

chartjs

chart.destroy();

chart.data = { labels, datasets }

The chart's data structure: an array of labels plus one or more datasets (each with data and styling).

Returns

ChartData

Example

chartjs

chart.data = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [{
    label: 'Sales',
    data: [5, 10, 7],
    backgroundColor: '#36a2eb',
  }],
};

`Controllers`

4 methods

Controller-specific configuration for the built-in chart types: bar, line, and pie/doughnut.

type: 'bar', datasets: [{ ...barOptions }]

Bar chart config. Dataset options include backgroundColor, borderColor, borderWidth, and barPercentage.

Returns

config

Example

chartjs

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2'],
    datasets: [{
      label: 'Revenue',
      data: [100, 200],
      backgroundColor: ['#36a2eb', '#ff6384'],
      borderWidth: 1,
    }],
  },
});

type: 'line', datasets: [{ ...lineOptions }]

Line chart config. Dataset options include borderColor, fill, tension (0-1, for spline), and pointRadius.

Returns

config

Example

chartjs

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed'],
    datasets: [{
      label: 'Temp',
      data: [20, 24, 21],
      borderColor: '#36a2eb',
      fill: false,
      tension: 0.4,
    }],
  },
});

type: 'pie' | 'doughnut', datasets: [{ ...pieOptions }]

Pie/doughnut config. Each data value gets a slice; backgroundColor is an array matching the data length.

Returns

config

Example

chartjs

new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [30, 40, 30],
      backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe'],
    }],
  },
  options: { cutout: '50%' },
});

options.scales: { x, y }

Configures the x and y axes (linear, category, time, log). Cartesian charts require scales to be set explicitly.

Returns

config

Example

chartjs

options: {
  scales: {
    y: { beginAtZero: true, max: 250 },
    x: { grid: { display: false } },
  }
}

All references