Chart.js Image Label Plugin

The Chart.js Image Label Plugin is an extension for Chart.js that allows you to add images as labels to a Doughnut chart. This plugin enables you to enhance your charts with images, making the visualization more engaging and informative.

What it looks like:

Installation

You can install the Chart.js Image Label Plugin using npm or yarn:

npm install chartjs-plugin-image-label

Usage

To use this plugin, follow these steps:

• Include the plugin in your Chart.js setup.

import { Chart } from 'chart.js';
import ChartPluginImageLabel from 'chartjs-plugin-image-label';
const ctx = document.getElementById('myDoughnutChart');

new Chart(ctx, {
  // other chart configuration
  plugins: [ChartPluginImageLabel]
})

• Create your Doughnut chart and configure it with image labels:

const ctx = document.getElementById('myDoughnutChart');

const data = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      data: [30, 40, 30],
      backgroundColor: ['red', 'blue', 'green'],
    },
  ],
};

new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    plugins: {
      imageLabel: {
        verticalAlign: 'middle',
        horizontalAlign: 'middle',
        offset: 10,
        imagesList: [{
          imageUrl: 'https://picsum.photos/40',
          imageWidth: 40,
          imageHeight: 40
        },
        {
          imageUrl: 'https://picsum.photos/40',
          imageWidth: 40,
          imageHeight: 40
        },
        {
          imageUrl: 'https://picsum.photos/40',
          imageWidth: 40,
          imageHeight: 40
        }]
      }
    }
  },
});

Configuration

The plugin supports the following configuration options:

Option	Values	Description
verticalAlign	top, middle, bottom	Specifies the vertical alignment of the image label within the chart slice.
horizontalAlign	start, middle, end	Specifies the horizontal alignment of the image label within the chart slice.
offset	Number	Horizontal offset between slices
imagesList	Array of objects	An array of objects that define the images to be used as labels.

imagesList Object Structure

Each object in the imagesList array should have the following structure:

Property	Type	Description
imageUrl	String	The URL of the image to be used as a label.
imageWidth	Number	The width of the image in pixels.
imageHeight	Number	The height of the image in pixels.

License

MIT

Copyright (c) 2023-present Yunus Emre Kara