0

I have a pie chart, on which I would like to put the percentage of slices

function createChart(ctx,config){
      Chart.defaults.font.size = 13;
      Chart.defaults.color="#fff";
      Chart.defaults.elements.line.cubicInterpolationMode="default";
      //Chart.register(ChartDataLabels);
      new Chart(ctx, config);
    }

    function setConfig(data,labeles,config,date){

    colors=['#b30000','#7c1158','#4421af','#1a53ff','#0d88e6','#00b7c7','#5ad45a','#8be04e'];

        config.data.labels= labeles;
        let total = 0;
        if (config.type === 'pie') {
            ar = [];
            for (i in data) {
                ar.push(data[i][data[i].length - 1]);
            }
            config.data.datasets.push({
                label:' €',
                data: ar,
                borderColor: colors,
                backgroundColor: colors,
            })

        } else if (config.type === 'line') {
            config.data.labels = date;
            for (let i in data) {
                config.data.datasets.push({
                    label: labeles[i],
                    data: data[i],
                    fill: false,
                    borderColor: colors[i],
                    backgroundColor: colors[i],
                    borderWidth: 4,
                    pointHoverRadius: 6,
                    pointHoverBorderWidth: 4,
                    pointHoverBackgroundColor: '#282c34',
                    tension: 0.1
                })
            }
        }
        return config
    }

const configPie1={
type: 'pie',
    data: {
      datasets:[]
    },
    options: {
        maintainAspectRatio: false,
        responsive: true,
    },

};

This is the code I use in the index.html to display it (I won't report the implemented libraries)

 <div class="col-sm-4" style="height: max-content; margin-top: 12px; background-color: #7F6951; 
     border- radius: 5px;">
      <canvas id="PieChart" style="display: block; box-sizing: border-box; padding-bottom: 12px;
        padding-top: 12px; padding-left: 12px; padding-right: 12px;"></canvas>
 </div>
<script>
    const ctx = document.getElementById('PieChart');
    createChart(ctx,setConfig({{valori}},   
     {{data|tojson}},configPie1{{time|tojson}}));

I put the picture with the result

enter image description here

I tried using some plugins or formulas but I couldn't get them to work with any method found. I wish I had the percentage written inside the pie slices, Thanks in advance.

F3D3
  • 1
  • 1
  • Does this answer your question? [ChartJS: datalabels: show percentage value in Pie piece](https://stackoverflow.com/questions/52044013/chartjs-datalabels-show-percentage-value-in-pie-piece) – mmh4all Mar 07 '23 at 14:51
  • no, but maybe I'm wrong in implementing it, could you help me? – F3D3 Mar 07 '23 at 15:15
  • Where this setConfig is called. Can you post reproducible problem or fiddle maybe? – CodeThing Mar 07 '23 at 15:40
  • I added the missing code, maybe now it's clearer. I get the data from the db with python and use flask as server – F3D3 Mar 08 '23 at 14:50

0 Answers0