Integration

ESM

import { Chart } from 'chart.js'
import autocolors from 'chartjs-plugin-autocolors'

TypeScript

With "moduleResolution": "node" (also called node10, the legacy mode some Angular and older webpack projects still use), TypeScript ignores the package’s exports map and reads the CommonJS type declarations. The default import above then fails with:

TS1259: Module '"chartjs-plugin-autocolors"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

Either enable interop in tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

or switch to a resolution mode that reads exports, such as "bundler" (together with "module": "esnext" or "preserve"), "node16" or "nodenext". node10 resolution is deprecated as of TypeScript 6.

Avoid working around the error with import * as autocolors. It type-checks, but under a bundler it hands Chart.js the module namespace object rather than the plugin itself.

CDN

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>

When loaded from a CDN, the plugin is exposed as a global instead of a module export.

const autocolors = window['chartjs-plugin-autocolors']

Registering

Register the plugin for every chart on the page:

Chart.register(autocolors)

Or register it for a single chart only:

const chart = new Chart(ctx, {
  // ...
  plugins: [autocolors],
})

Disabling

If registered globally, it might be desirable to disable autocolors for some charts:

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        enabled: false,
      },
    },
  },
})

Browser compatibility

The plugin uses a generator function, so it is not compatible with Internet Explorer.