CODEWITHSUNDEEP
angularchart.jsprimeng
Wannes De Craene
Wannes De Craene

Reputation: 53

Hiding legend in PrimeNG

So I want to hide my legend in my piechart because the 52 labels are taking too much space but I can't find a way to do it in primeNG.

My Code:

chart.component.html

    <p-chart type="doughnut" [data]="monthlyTeamCost"></p-chart>

declaration in my component.ts

this.monthlyTeamCost = {
                    labels: team,
                    options: {labels: {display: false}},
                    datasets: [
                        {
                            data: amount,
                            backgroundColor: colorArr,
                        }],
                    };

So all the data is fine just the labels should be hidden. Thanks in advance

Upvotes: 5

Views: 5972

Answers (3)

madhuwantha priyashan
madhuwantha priyashan

Reputation: 1

options: {
   plugins: {
     legend: {display: false},
   }
}

This is the solution.

Upvotes: 0

Ishan Liyanage
Ishan Liyanage

Reputation: 2407

You can do like this.

HTML:

<p-chart type="horizontalBar" [data]="data" [options]="options"></p-chart>

In your TS file:

options = {
  legend: {display: false}  
}

Upvotes: 0

Adrien BARRAL
Adrien BARRAL

Reputation: 3604

You need to bind options to an object like this : 

<p-chart type="doughnut" [data]="monthlyTeamCost" [options]="chartOptions"></p-chart>

Then in you TS File : 

this.chartOptions = {
  legend: {display: false}
}

Prime NG is a binding of Chart.JS (for charting part of the library), so you can found the exhaustive list of options in the Chart.JS web site : http://www.chartjs.org/docs/latest/

Upvotes: 16

Related Questions