JAVASCRIPT

empty donut chart chart js

let ctx = document.getElementById('chartContainer').getContext('2d');

let data = [[0, 0, 0], [1,2,3]];
let labels = ["A", "B", "C"];
let bgColors = ['yellow', 'orange', 'aquamarine'];

let options = {
  borderWidth: 1,
  borderColor: 'black',
  legend: {
    labels: {
    	// Prevent items with undefined labels from appearing in the legend
      filter: (item) => item.text !== undefined
    }
  },
  tooltips: {
    // Prevent items with undefined labels from showing tooltips
  	filter: (item, chart) => chart.labels[item.index] !== undefined
  }
}

let chartConfig = {
  type: 'pie',
  data: {
    labels: labels,
    datasets: [{
      data: data[0],
      backgroundColor: bgColors,
      label: "data",
      borderColor: 'black',
      borderWidth: 2
    }, {
      data: data[1],
      backgroundColor: bgColors,
      label: "data",
      borderColor: 'black',
      borderWidth: 2
    }]
  },
  options: options
}

// Check if data is all 0s; if it is, add dummy data to end with empty label
chartConfig.data.datasets.forEach(dataset => {
  if (dataset.data.every(el => el === 0)) {
    dataset.backgroundColor.push('rgba(255,255,255,0)');
    dataset.data.push(1);
  }
})


let pieChart = new Chart(ctx, chartConfig);