CODEWITHSUNDEEP
angularchart.jschartjs-2.6.0
user1722043
user1722043

Reputation: 175

ChartJs - Pie Chart - how to remove labels that are on the pie chart

I am using piechart from chart.js for visualization in my application. I am using a plug-in with it chartjs-plugin-piechart-outlabels to show the labels as out-segments from the pie chart.

It's all working fine, except that, the labels exists on the pie chart, which I do not want, as I am showing the labels as out-segments.

I have looked through documentation and couldnt find solution to this, also looked some examples.

public static readonly pieChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
  display: false
},
tooltips: {
  enabled: true
},
layout: {
  padding: {
    left: 0,
    right: 0,
    top: 70,
    bottom: 0
  }
},
plugins: {
  outlabels: {
    display: true,
    borderWidth: 2,
    lineWidth: 2,
    padding: 3,
    textAlign: 'center',
    stretch: 15,
    font: {
      resizable: true,
      minSize: 12,
      maxSize: 18
    },
    valuePrecision: 1,
    percentPrecision: 2
  }
}

};

Actual result

Upvotes: 3

Views: 4823

Answers (2)

danillo fidel gomes
danillo fidel gomes

Reputation: 21

You need to turn off the sample labels, like this:

options: {
  plugins: {
    datalabels: {
      display: false
    }
    outlabels: {
      display: true
    }
  }
}

Upvotes: 2

user1722043
user1722043

Reputation: 175

@yurzui mentioned, there was reference of chartjs-plugin-labels which i missed to remove. Thanks @yurzui

Upvotes: 0

Related Questions