CODEWITHSUNDEEP
javascriptchart.js
tpszer
tpszer

Reputation: 53

Chart.js - How to remove percentage data labels?

I'm using Chart.js and I want to remove labels with percentage marked with red circle on image below.

Example

I'm using this code to produce this chart:

const options = {
    responsive: true,
    title: {
        display: false
    },
    legend: {
        display: false
    },
    tooltips: {
        mode: 'index',
        intersect: true
    },
    scales: {
        yAxes: [{
            type: 'linear',
            position: 'left',
            id: 'y-axis-1'
        }, {
            type: 'linear',
            position: 'right',
            id: 'y-axis-2',
            gridLines: {
                drawOnChartArea: false
            }
        }],
    }
};

new Chart(document.getElementById('originalThirdChart').getContext('2d'), {
    type: 'bar',
    data: data,
    options: options
});

How can I do this? Thanks in advance!

Upvotes: 4

Views: 5728

Answers (3)

Made Agus Andi Gunawan
Made Agus Andi Gunawan

Reputation: 11

Thanks brother, my problem has solve from your solution

add option chart add :

options: { 
    plugins: {
      labels: {
        render: () => {}
      }
    }
}

Upvotes: 1

Sparfel
Sparfel

Reputation: 31

If you want to remove only the percentages, just add this line in your options

labels: { render: () => {} }

It will look like:

options: { 
        plugins: {
          labels: {
            render: () => {}
          }
        }
    }

Upvotes: 3

Rishabh Shah
Rishabh Shah

Reputation: 580

There must be some logic in your code. ctx.fillText(value + '%', position.x, position.y); like this. I don't see that in your code given code. if it is there, Please remove it. It will work.

Upvotes: 0

Related Questions