How to add image inside the doughnut chart using chart.js?
How to add image inside the doughnut chart using chart.js?
1 answer
by
darrion.kuhn ,
5 months ago
@arnoldo.moen
To add an image inside a doughnut chart using Chart.js, you can use a custom plugin. You'll need to follow these steps:
- Firstly, include the Chart.js library in your HTML file.
1
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
- Next, create a new canvas element in your HTML where the chart will be rendered.
1
|
<canvas id="myChart"></canvas> |
- Create a custom plugin named "chartImage" which will handle adding the image inside the doughnut chart.
1 2 3 4 5 6 7 8 9 10 11 |
Chart.plugins.register({
afterDraw: function(chart) {
if (chart.config.options.chartImage) {
var chartArea = chart.chartArea;
var ctx = chart.ctx;
var img = new Image();
img.src = chart.config.options.chartImage;
ctx.drawImage(img, chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
}
}
});
|
- Initialize the doughnut chart with the custom "chartImage" plugin and provide the image URL.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
data: [20, 30, 50],
backgroundColor: ['red', 'blue', 'yellow']
}]
},
options: {
chartImage: 'image.jpg' // Provide the image URL here
}
});
|
Make sure to replace "image.jpg" with the actual URL of your image.
That's it! The image specified in the chartImage option will now be added inside the doughnut chart.
Related Threads:
How to center an image inside a table using tailwind css?
How to get a line chart inside a circle using d3.js?
How to add a chart with a table in chart.js?
How to add a point to chart.js line chart?
How to add custom label for line chart from chart.js?
How to add text on image using javascript and canvas?