TypeScript

This plugin provides TypeScript type declaration files bundled in the npm package so that types of this plugin options are checked when building your TypeScript project.

Option Context

The declaration of the option context is exported as Context:

import {Context} from 'chartjs-plugin-datalabels';
const chart = new Chart('foo', {
  options: {
    plugins: {
      datalabels: {
        rotation: (ctx: Context) => {
          return ctx.dataIndex % 2 ? 180 : 0;
        },
      }
    }
  }
});

Extending this context can be done using one of the following methods:

Custom Interface

import {Context} from 'chartjs-plugin-datalabels';
interface FooContext extends Context {
  foo?: number;
}
const chart = new Chart('foo', {
  options: {
    plugins: {
      datalabels: {
        rotation: (ctx: FooContext) => ctx.foo || 0,
        listeners: {
          click: (ctx: FooContext) => {
            ctx.foo += (ctx.foo || 0) + 10;
            return true;
          }
        }
      }
    }
  }
});

TIP

This method allows to declare different context interfaces to use in different charts.

Module Augmentation

// shims-chartjs-plugin-datalabels.d.ts
import {Context} from 'chartjs-plugin-datalabels';
declare module 'chartjs-plugin-datalabels' {
  interface Context {
    foo?: number;
  }
}

// index.ts
const chart = new Chart('foo', {
  options: {
    plugins: {
      datalabels: {
        rotation: (ctx: Context) => ctx.foo || 0,
        listeners: {
          click: (ctx: Context) => {
            ctx.foo += (ctx.foo || 0) + 10;
            return true;
          }
        }
      }
    }
  }
});

WARNING

The augmented Context declaration will be the same for all charts. This method should be considered only if all charts should share the same context declaration. Read more about module augmentation (opens new window).