tessl/npm-chartjs-plugin-datalabels

Chart.js plugin to display labels on data elements

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Plugin Integration

Name: tessl/npm-chartjs-plugin-datalabels
Author: tessl

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

Capabilities

Plugin Registration

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):

Dataset-level options (datasets[i].datalabels)
Chart-level options (options.plugins.datalabels)
Global defaults (Chart.defaults.plugins.datalabels)
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.

Install with Tessl CLI

npx tessl i tessl/npm-chartjs-plugin-datalabels

docs

content-formatting.md

plugin-integration.md

tile.json

tessl/npm-chartjs-plugin-datalabels