or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

content-formatting.mdevent-handling.mdindex.mdlabel-positioning.mdlabel-styling.mdmulti-label.mdplugin-integration.md
tile.json

plugin-integration.mddocs/

Plugin Integration

Chart.js Plugin Datalabels integration with Chart.js including registration methods, configuration hierarchies, and basic setup patterns.

Capabilities

Plugin Registration

Register the plugin globally for all charts or use it on a per-chart basis.

Global Registration

/**
 * Register plugin globally for all Chart.js instances
 */
Chart.register(ChartDataLabels);

Usage Example:

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// Register globally - applies to all charts
Chart.register(ChartDataLabels);

const chart = new Chart(ctx, {
  type: 'bar',
  data: { /* chart data */ },
  options: {
    plugins: {
      datalabels: {
        // Plugin configuration here
        color: 'blue'
      }
    }
  }
});

Per-Chart Registration

/**
 * Use plugin for specific chart instance only
 */
plugins: [ChartDataLabels]

Usage Example:

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

const chart = new Chart(ctx, {
  type: 'line',
  data: { /* chart data */ },
  options: {
    plugins: {
      datalabels: {
        display: true
      }
    }
  },
  plugins: [ChartDataLabels] // Only this chart uses the plugin
});

Configuration Hierarchy

The plugin supports multiple levels of configuration with proper inheritance and override behavior.

// Global default configuration
Chart.defaults.plugins.datalabels = Options;

// Per-chart configuration
options: {
  plugins: {
    datalabels: Options
  }
}

// Per-dataset configuration
data: {
  datasets: [{
    datalabels: Options | boolean
  }]
}

Configuration Priority (highest to lowest):

  1. Dataset-level options (datasets[i].datalabels)
  2. Chart-level options (options.plugins.datalabels)
  3. Global defaults (Chart.defaults.plugins.datalabels)
  4. Plugin defaults

Usage Example:

// Global defaults for all charts
Chart.defaults.plugins.datalabels = {
  color: 'black',
  font: {
    size: 12
  }
};

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30],
      datalabels: {
        color: 'red', // Overrides global default
        font: {
          size: 14 // Overrides global default
        }
      }
    }, {
      label: 'Dataset 2', 
      data: [15, 25, 35],
      datalabels: false // Disables labels for this dataset
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: 'white' // Applied to all datasets unless overridden
      }
    }
  }
});

Plugin Control

Enable or disable the plugin at different levels.

// Disable plugin globally
Chart.defaults.plugins.datalabels = false;

// Disable plugin for specific chart
options: {
  plugins: {
    datalabels: false
  }
}

// Disable plugin for specific dataset
datasets: [{
  datalabels: false
}]

Usage Example:

// Disable labels for specific conditions
const chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [10, 20, 30],
      datalabels: {
        display: function(context) {
          // Only show labels for values greater than 15
          return context.parsed > 15;
        }
      }
    }]
  }
});

Chart.js Module Declaration

TypeScript users benefit from automatic type augmentation.

declare module 'chart.js' {
  interface ChartDatasetProperties<TType extends ChartType, TData> {
    datalabels?: Options;
  }

  interface PluginOptionsByType<TType extends ChartType> {
    datalabels?: Options;
  }
}

This allows TypeScript to recognize the datalabels property in Chart.js configurations without additional type assertions.