Chartjs-Chart.js how to increase segments size to be more evenly distributed

by

0👍

✅

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.

Leave a comment