Auto Generating Pie Chart Legend

Question

I am trying to create a pie chart in JavaScript. I would like this chart to display in the legend only the labels that are non zero.

Does anyone have any ideas how this can be done?

Here is the code I have so far. Currently the legend of the pie chart shows all possible 12 Labels, even though 8 of these have zero value. "Data" will eventually be filled from a database and therefore it is important that this is an automated process.

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Astronomica", "Deuteronic", "Floral", "Galactic","Celestrial","Heliosphere","Jupiter","Interstella","Koronis","Eclipse,"Borealis","Lunatic"],
    datasets: [{
      data: [12.21, 15.58, 11.25, 8.32],
      backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
    }],
  },
});

morteza ataiy morteza ataiy · Accepted Answer · 2018-08-14T13:40:53

You can manage data before use they.

var ctx = document.getElementById("myPieChart");
var input_lables = ["Astronomica" , "Deuteronic", "Floral", "Galactic", "Celestrial", "Heliosphere", "Jupiter", "Interstella","Koronis", "Eclipse", "Borealis", "Lunatic"];
var input_values = [12.21, 15.58, 11.25, 8.32];
var output_lables = [];
var output_values = [];
for(var i=0;i<input_lables.length;i++){
     if(!values[i]){
           output_lables.push(input_lables[i]);
           output_values.push(input_values[i]);
     }        
}      
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: output_lables,
    datasets: [{
      data: output_values,
      backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
    }],      
  },
});

if you went to automatic it just enough make a function like this code.

Auto Generating Pie Chart Legend

2 Answers