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