Chart.js plugin to add image labels to doughnut charts.
npm install chartjs-plugin-image-labelbash
npm install chartjs-plugin-image-label
`
Usage
To use this plugin, follow these steps:
- Include the plugin in your Chart.js setup.
`javascript
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:
`javascript
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. |
$3
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. |