CODEWITHSUNDEEP
javascriptangularchartschart.jsng2-charts
tyler
tyler

Reputation: 488

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

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.

Upvotes: 2

Views: 1404

Answers (1)

Mehul Kothari
Mehul Kothari

Reputation: 421

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,
          }
        },

Upvotes: 1

Related Questions