I am trying to represent some data which have big differences between them, like [500, 30, 20, 5, 1, 1] and my chart is not really readable. How can I cam make each segment from the pie chart to be more evenly distributed.
async function drawPieChart(data, labels) {
if (myChartPie != null) {
myChartPie.destroy();
resetCanvas();
}
let ctx = document.getElementById('myChart').getContext('2d');
myChartPie = new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: "text",
data: data,
backgroundColor:(() => {
let bgcolors = []
let count = 0;
for (elem in data) {
count+=2;
bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
if (count === 8) {
count = 0;
}
}
return bgcolors
})
}]
},
options: {
percentageInnerCutout: 80,
padding: 10,
plugins: {
datalabels: {
anchor: 'end',
align:'start',
color: '#fff',
borderWidth: 1,
borderColor: '#fff',
offset: -10,
borderRadius:100,
backgroundColor: "black",
font: {
weight: 'bold',
size: '15'
},
formatter: function(value) {
return value.scm_count;
}
}
},
title: {
display: true,
text: 'Count versions of SCM',
fontSize: 25,
fontStyle: 'bold',
fontColor: 'black',
},
legend: {
padding: 30,
display: true,
fontColor: 'rgb(255, 99, 132)',
position: "right",
backgroundColor:(() => {
let bgcolors = []
let count = 0;
for (elem in data) {
count+=2;
bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
if (count === 8) {
count = 0;
}
}
return bgcolors
})
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 50
}},
responsive: true,
},
maintainAspectRatio: false,
});
Chart.plugins.register({
beforeDraw: function(c) {
var legends = c.legend.legendItems;
let i = 0;
legends.forEach(function(e) {
i+=2;
e.fillStyle = Chart['colorschemes'].brewer.BuPu9[i];
if (i ===8)
{
i = 0;
}
});
}
});
};
I expect the smaller ones to increase a little bit in size to be visible.
I was thinking somehow to represent them by percentage but I can not find any way to do that.
You really cannot display really small values well proportionally in pie (or any) chart.
Now you could possibly change the scale to use logarithmic (do note that Math.log(1) e.g. ln(1) is 0). Something like this:
async function drawPieChart(data, labels) {
if (myChartPie != null) {
myChartPie.destroy();
resetCanvas();
}
let ctx = document.getElementById('myChart').getContext('2d');
myChartPie = new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: "text",
data: data,
backgroundColor:(() => {
let bgcolors = []
let count = 0;
for (elem in data) {
count+=2;
bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
if (count === 8) {
count = 0;
}
}
return bgcolors
})
}]
},
options: {
percentageInnerCutout: 80,
padding: 10,
plugins: {
datalabels: {
anchor: 'end',
align:'start',
color: '#fff',
borderWidth: 1,
borderColor: '#fff',
offset: -10,
borderRadius:100,
backgroundColor: "black",
font: {
weight: 'bold',
size: '15'
},
formatter: function(value,I) {
//return value.scm_count;
return Math.exp(value).scm_count;
}
}
},
title: {
display: true,
text: 'Count versions of SCM',
fontSize: 25,
fontStyle: 'bold',
fontColor: 'black',
},
legend: {
padding: 30,
display: true,
fontColor: 'rgb(255, 99, 132)',
position: "right",
backgroundColor:(() => {
let bgcolors = []
let count = 0;
for (elem in data) {
count+=2;
bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
if (count === 8) {
count = 0;
}
}
return bgcolors
})
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 50
}},
responsive: true,
},
maintainAspectRatio: false,
});
Chart.plugins.register({
beforeDraw: function(c) {
var legends = c.legend.legendItems;
let i = 0;
legends.forEach(function(e) {
i+=2;
e.fillStyle = Chart['colorschemes'].brewer.BuPu9[i];
if (i ===8)
{
i = 0;
}
});
}
});
};
var myChartPie;
var orig_data = [500, 30, 20, 5, 1, 1];
var data = orig_data.map(function(e) {
if (e == 1) { e = 1.2 };
e = Math.log(e);
return e;
});
var labels = ["One", "Two", "Three", "Four", "Five", "Six"];
drawPieChart(data,labels);
https://jsfiddle.net/mattsrinc/e4dLny2b/30/
See at the bottom of the code how I adjusted values with their logarithmic values. You would have to find a way to change the labels to display their original values, though.