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:
You can install the Chart.js Image Label Plugin using npm or yarn:
npm install chartjs-plugin-image-labelTo 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
}]
}
}
},
});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. |
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. |
Copyright (c) 2023-present Yunus Emre Kara