Hide label on slice of Doghnut/Pie Chart Angular ng2-charts

user_11137041 0
Viewed 458

I have started using ng2-charts with Angular where I need to hide the text/value coming on slice of doughnut/Pie chart as shown and highlighted in below screenshot

Image Below is my code

pieChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        tooltips:{
          callbacks: {
            label: (ttItem,data) => (`${data.labels[ttItem.index]}: ${data.datasets[ttItem.datasetIndex].data[ttItem.index]}%`)
          }
        },
        plugins: {
          display:false,
          // labels: {
          //   // render: 'percentage',
          //   // fontColor: ['red', 'red', 'red'],
          //   // precision: 2,
          //   display:false
          // },
          datalabels: false ,
          label:false,
        },
        legend: {
          position: 'bottom',
          labels: {
            fontColor: "black",
            boxWidth: 15,
            padding: 10,
            fontFamily: 'Poppins ',
            fontSize: 12,
          },  
        },
        animation: {
          animateScale: true,
          animateRotate: true
        }
    };
    isPieChartPercentage :boolean = true;
    pieChartColors = [
        {
          backgroundColor: [
            'rgb(144, 238, 144)',
            '#ADD8E6',
            '#ffff80',
            '#e0eafc',
            '#f0b961',
            'black'
          ]
        }
    
      ]

I tried this things which didn't worked for me

options: {
  datalabels: {
    display: false, //not working
  },
}

options: {
  labels: {
    display: false // not working
  },
}

options: {
  labels:false  //not working
}

Any help will be appreciated.

ng2-charts chart.js angular charts javascript
1 Answers

I can see you are trying to remove the label from your chart i.e is from the pie of your chart. So to inform you if you don't know that label is coming from "chartjs-plugin-labels"

Either you can remove it, if not you can try below solution

     plugins: {
          labels: {
            render: function (args) {
              return   "";
            },
            fontColor: ['black', 'black', 'black'],
            precision: 2,
          }
        },
user_91366630
Related