javascriptchartschart.jsbar-chart

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


Solution

  • 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
        }
      },
    }