CODEWITHSUNDEEP
angular5chart.jsng2-charts
star
star

Reputation: 161

How to remove percentage calculation on top of bar in ng2-chart bar chart

I am trying to create bar chart using ng2-chart in angular 5. It is creating fine but i think i am missing some configuration due to which i am getting percentage calculation on top of maximum 2 bars. i want to remove these percentage

i am using ng2-charts(1.6.0), chart.js(2.7.2) in package.json. I have tried configuration available on chartjs.org for bar chart but not able to remove the percentage calculation for those bars. Please see yellow highlighted which i want to remove In html

<canvas baseChart
    height='260px'
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [colors]="chartColors"
    [legend]= "false"
    [chartType]="barChartType">
</canvas>

In Component

public barChartType: ChartType = 'bar';
public barChartOptions: ChartOptions = {
    responsive: true,
    scales: { xAxes: [{}], yAxes: [{ticks: {beginAtZero: true}}] },
    plugins: { datalabels: { anchor: 'end', align: 'end', } }
};

public barChartData = [ { data: [7,4,1,5,3,1,2,1]} ],
public barChartLabels = ['25/03','26/03','27/03','28/03','29/03','30/03','31/03','01/04','02/04',],
public chartColors = [ {backgroundColor: '#fa9cb0'} ]

i want simple bar without those random percentage on top of those bar. Just for info, it is coming for only small value. For values like 

[12,22,34,53,65,73,23,45]

It is fine.

Please let me know, how can i remove those percentage from top of bar. Is there any other configuration i need to use??

Upvotes: 0

Views: 2098

Answers (3)

Rajasekar
Rajasekar

Reputation: 18948

Need to import ChartDataLabels and then unregister 'ChartDataLabels' plugin

import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.plugins.unregister(ChartDataLabels);  // on ngAfterViewInit

Upvotes: 0

Juan
Juan

Reputation: 21

You can use the plugin: 'chartjs-plugin-labels' to solve the issue, here is the info to add the plugin to your Angular project:

https://emn178.github.io/chartjs-plugin-labels/

After you have the plugin installed in your project you have to add the library in the .ts file of the chart with this code snippet:

import 'chartjs-plugin-labels';

and in the plugins variable section add this code also:

 labels: {
  render: false
}

Upvotes: 0

star
star

Reputation: 161

I futher looked in the issue and found out that in my project global plugin was created which was wrongly implemented for every type of chart without any configrable property.

Chart.plugins.register({ // plugin implementation });

Refering to this link ChartJs Plugin

Upvotes: 1

Related Questions