Skip to content
Advertisement

How to hide value in Chart JS bar

i try to hide the value inside the bars of my bar chart. The reason for that is that i placed the value on top of the bars, and the value should not be shown twice.

I tried different options to hide the value but it did not work.

In the following you can see a screenshot, i want to remove the numbers inside the bars.

Image of the bars

Advertisement

Answer

Chart.js does not draw any data labels (values) itself by default. You most probably have activated (imported) a plugin such as chartjs-plugin-datalabels that draws these values:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

Simply remove the script tag from your code. To disable a global plugin for a specific chart instance only, the plugin options must be set to false.

In the case of chartjs-plugin-datalabels, this would be done as follows:

options: {
  plugins: {
    datalabels: {
      display: false
    }
  },
}
Advertisement