0
360
ViewsLegend position is not vertically in middle in Donut chart
In Donut chart Legend position is right but i want to add vertically in middle with corresponding of circle.
I am new to chartjs and JavaScript. Below is my code snippet. I am trying to load the pie/donut chart with legends but position is not right
// chart colors
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb'];
var donutOptions = {
cutoutPercentage: 65,
responsive: true,
legend: {
position: 'right',
padding: 2,
labels: {
pointStyle: 'circle',
usePointStyle: true,
}
}
};
// donut 1
var chDonutData1 = {
labels: ['Product 1', 'Product 2', 'Product 3', 'Product 4'],
datasets: [{
backgroundColor: colors.slice(0, 4),
borderWidth: 2,
data: [74, 11, 40, 20]
}],
};
var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
new Chart(chDonut1, {
type: 'pie',
data: chDonutData1,
options: donutOptions
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<div class="">
<canvas id="chDonut1"></canvas>
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
Updating to the latest V2 (2.9.4) version of chart.js will resolve your issue:
// chart colors
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb'];
var donutOptions = {
cutoutPercentage: 65,
responsive: true,
legend: {
position: 'right',
padding: 2,
labels: {
pointStyle: 'circle',
usePointStyle: true,
}
}
};
// donut 1
var chDonutData1 = {
labels: ['Product 1', 'Product 2', 'Product 3', 'Product 4'],
datasets: [{
backgroundColor: colors.slice(0, 4),
borderWidth: 2,
data: [74, 11, 40, 20]
}],
};
var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
new Chart(chDonut1, {
type: 'pie',
data: chDonutData1,
options: donutOptions
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<div class="">
<canvas id="chDonut1"></canvas>
</div>
·
Juan Pablo Isaza
Report
Answer question