Skip to content

yunusemrejs/chartjs-image-label

Repository files navigation

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:

image

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