[Solved]-Chart.js: Make part of labels bold-Chart.js

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'black'
            }
        }
    }
});

You can find in http://www.chartjs.org/docs/latest/general/fonts.html

I hope it will be help you.

The fontStyle value should be present inside the ticks object (in case of react-chartjs-2).

const options = { 
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: '#2c2c2c', // X-Axis font color
          fontStyle: 'bold',    // X-Axis font style 
        },
      },
    ],
  }
}

I just tried this. Any acceptable values from the link below should work

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Ex:

Chart.defaults.global.defaultFontStyle = '600';

If you are looking for a fancy label with value processing and with some sign, bold label etc.

           labels: {
                        render:function (args) {
                            if (args.value != 0)
                                return +(parseFloat(args.value).toFixed(2)) + "hrs";
                        },
                        fontStyle: "bold",
                        fontColor: 'black',
                        position : 'outside'
                    }

I hope this helps.

You need to use directly the UTF-8 characters. I am working on different graphs now and the tool which is available at https://yaytext.com/bold-italic/ helped me a lot.

For example, the following words were created by the tool, see the source code, they are without any HTML formatting:

Hello World! 𝐇𝐞𝐥𝐥𝐨 𝐖𝐨𝐫𝐥𝐝! 𝗛𝗲𝗹𝗹𝗼 𝗪𝗼𝗿𝗹𝗱! 𝐻𝑒𝑙𝑙𝑜 𝑊𝑜𝑟𝑙𝑑!

The labels are actually denoted by ticks , please try below solution.

public barChartOptions = {
    scales: {
      xAxes: [{
        /* For changing color of x-axis coordinates */
        ticks: {
          fontSize: 18,
          padding: 0,
          fontColor: '#000'
        }
      }]
      }
  };    

Hopefully this will help you.

I'm not too familiar with chartJS but I do believe that you can add the following :

Chart.defaults.global.defaultFontStyle = 'Bold'

OR

 options: {
    scale: {
        pointLabels :{
           fontStyle: "bold",
        }
    }
}

References: 1) Chart js. How to change font styles for "labels" array?

Hope this helps!

Joel