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

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!

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

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!

• javascript
• chart.js

• Can you please provide jsfiddle ? – Rishabh Shah Commented Oct 27, 2018 at 2:39
• 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, Pleaseremove it. It will work. – Rishabh Shah Commented Oct 27, 2018 at 2:47
• 1 @RishabhShah Thank You very much! I had included chartjs-plugin-labels script and I didn't realise that It's enabled automatically. I modified chartjs-plugin-labels behaviour and now chartjs is working as expected. – tpszer Commented Oct 27, 2018 at 8:41
• how did it enabled automatically. I am also trying to do in one my chart. but, not getting applied. what had you done? – Rishabh Shah Commented Oct 27, 2018 at 8:52
• 2 github./emn178/chartjs-plugin-labels I included this JS after including Chart.js and labels appeared. – tpszer Commented Oct 28, 2018 at 11:05

3 Answers 3

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: () => {}
          }
        }
    }

Thanks brother, my problem has solve from your solution

add option chart add :

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

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.