Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

176
Views
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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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,
          }
        },
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!