Search code examples
javascripthtmlcharts

ChartJS make the data value on chart more bigger and bold

I'm struggling a bit with trying to show the data value on top of the bar charts more bigger and bolder. At the moment it's coming out so small that hardly anyone can see. This is the code i'm using:

onComplete: function () {
  var chartInstance = this.chart;
      // ctx = chartInstance.ctx;
      // ctx.textAlign = 'center';
      // ctx.fillStyle = "rgba(0, 0, 0, 1)";
      // ctx.textBaseline = 'bottom';

      this.data.datasets.forEach(function (dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function (bar, index) {
              var data = dataset.data[index];
              ctx.fillText(data, bar._model.x, bar._model.y - 10);

          });
      });
  }

This is how the data looks at the moment:

enter image description here

As you can see it's very tiny the numbers on top of the bar. What can i change to make it bigger and bold. Tried searching the net but o no avail.

Thank You

Solution

  • Since it appears as if you are drawing/writing to the canvas' context directly, one approach would be to use the respective .font property of the context.

    I assume that - since ctx is commented out in your example - you are requesting the CanvasRenderingContext2D somewhere in your code via .getContext('2d') and store it in a variable ctx that you use later inside the onComplete callback.

    You can find examples about the usage of the .font property on MDN, however it should/could look like:

    ctx.font = 'bold 20px sans-serif';

    where 20px defines the font size.