Bold text inside doughnut chart (chart.js)

Question

I'm trying to set bold text inside my doughnut chart(using chart.js)

And below code is working well, but -fontStyle and fontWeight-these are not working at all.

How can I change my center text to bold?

let ctx = chart.chart.ctx;

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '3vh Montserrat';
ctx.fontStyle = 'bold';  // not working!
ctx.fontWeight = '900';  // not working!

http://jsfiddle.net/wh5kcqzy/3/

Answer 1

Plz see HTML canvas font Property.

The JavaScript syntax: context.font="italic small-caps bold 12px arial";

Reference: https://www.w3schools.com/tags/canvas_font.asp

In your case just replace:

let ctx           =   chart.chart.ctx;
let fontSize      =   (height / 100).toFixed(2);

ctx.textAlign     =   'center';
ctx.textBaseline  =   'middle';
ctx.font          =   "bold " + fontSize + "em Montserrat";