How to hide label for chart.js

Question

I have chart which show 3 types of label

I want to keep two of them and want to hide one Invoice Income Report. How can I hide that one label? I am using chart.js v2

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Invoice Income Report',
      data: bar_chart_data,
      backgroundColor: colors,
      borderWidth: 1
    }, {
      label: 'Below Average',
      backgroundColor: ['rgba(255, 99, 132, 1)']
    }, {
      label: 'Above Average',
      backgroundColor: ['rgba(11, 156, 49, 1)']
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

Simply add legend property and make display false. I added working example. — Conda, Apr 11 '22 at 13:03

score 1 · Answer 1 · edited Apr 07 '23 at 13:08

1

Add legend option to options configuration, set display to false:

                , options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    legend: {
                      display: false
                    }
                }

Consider the docs v3 or docs v2.

edited Apr 07 '23 at 13:08

Cadoiz

1,446
21
31

answered Jun 14 '21 at 10:28

guolei1998

27
2

either the scales or legend wont work in this current config. This is V2 and V3 syntax combined – LeeLenalee Oct 07 '22 at 09:23
For me it works fine. I use wkhpdf to convert html to pdf and plugins don't work for me, so this is the perfect solution. – Cadoiz Apr 06 '23 at 06:18

score 1 · Answer 2 · answered Apr 11 '22 at 12:59

You can simply make display false.

const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
        display: false,
      },
      title: {
        display: false,
        text: 'Chart.js Line Chart',
      },
    },
  };

Justin · Answer 3 · 2023-02-15T13:33:35.510

1

To hide the labels on version 4.2.1 of chart.js use this:

// Example chart.
const chart = new Chart(id, {
        type: 'bar', // Chart type.
        data: data, // Your data.

        options: {
            // Add plugins to options.
            plugins: {
                legend: {
                    display: false // This hides all text in the legend and also the labels.
                }
            }
            // add your scales or other options.
        }
    });

For more info use the doc: https://www.chartjs.org/docs/latest/configuration/legend.html

edited Feb 15 '23 at 13:33

answered Oct 25 '22 at 09:12

Justin

103
1
10

1

maybe you meant "false" – Giovanni Dec 04 '22 at 16:15

score 0 · Answer 4 · answered Jun 14 '21 at 10:14

0

In chart.js, You can hide the labels using legend attribute. Add the following code in options of chart.js

legend: {
    display: false
}

According to your code, after adding legend the options will be .....

options: {
    scales: {
        y: {
            beginAtZero: true
        }
    },
    legend: {
        display: false
    }
}

answered Jun 14 '21 at 10:14

John Doe

1,401
1
3
14

@BilalArshad show your complete code or make a fiddle so i can help you in a better way. – John Doe Jun 14 '21 at 10:29
either the scales or legend wont work in this current config. This is V2 and V3 syntax combined – LeeLenalee Oct 07 '22 at 09:24
Isn't this a duplicate to [this answer](https://stackoverflow.com/a/67968450/4575793)? – Cadoiz Apr 06 '23 at 06:18

How to hide label for chart.js

4 Answers4