Sometimes, we want to display data values on Chart.js and JavaScript.

In this article, we’ll look at how to display data values on Chart.js and JavaScript.

How to display data values on Chart.js and JavaScript?

To display data values on Chart.js and JavaScript, we add the datalabels.formatter method.

For instance, we write

const myBarChart = new Chart(ctx, {
  type: "bar",
  data: yourDataObject,
  options: {
    // ...
    plugins: {
      datalabels: {
        anchor: "end",
        align: "top",
        formatter(value, context) {
          return getValueFormatted(value);
        },
      },
    },
  },
});

to add the datalabels.formatter method to return the formatted value of the value.

value is the display data value of a point.

Conclusion

To display data values on Chart.js and JavaScript, we add the datalabels.formatter method.