Chartjs-Chartjs-node-canvas doughnut chart

by

0👍

✅

  1. There is a minor typo in barChartLabels variable. It should be ['Vantaggi', 'Svantaggi'] instead of ['Vantaggi, Svantaggi']. At the moment the array contains only one single string 'Vantaggi, Svantaggi'.

  2. To enable tooltips you could include tooltips:{ enabled: true } object to the options property.

Try the following

const barChartOptions = {
  responsive: true,
  aspectRatio: 1,
  cutoutPercentage: 75,
  maintainAspectRatio: true,
  legend: {
    display: true,
    position: 'bottom',
    labels: {
      boxWidth: 10,
      fontSize: 13,
      color: '#959ead'
    }
  },
  tooltips:{           // <-- to enable tooltips
    enabled: true
  }
};
const barChartLabels = ['Vantaggi', 'Svantaggi'];  // <-- to fix labels in legend
const barChartType = 'doughnut';

this.chart = new Chart('canvas', {
  type: barChartType,
  data: {
    labels: barChartLabels,
    datasets: [
      { 
        data: [50, 20],
        backgroundColor: ['#69c499', '#fb5b5b'],
        fill: true
      },
    ]
  },
  options: barChartOptions
});

Working example: Stackblitz

Leave a comment