Skip to content
Chart.js

Chart & Controllers API Reference

Chart.js APIs — the Chart constructor and lifecycle, plus controller-specific config for bar, line, and pie charts.

By EZ4Code Team

Chart

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.

Returns: Chart

chart.config

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

Returns: ChartConfiguration

chart.update(mode?)

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

Returns: void

chart.destroy()

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

Returns: void

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

Controllers

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

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

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

Returns: config

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

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

Returns: config

options.scales: { x, y }

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

Returns: config

More Chart.js API References