Chart.js: Make part of labels bold

Question

I want to make a part of the labels in chartJS bold. I've been looking in the documentation but I cant find of any way. I hope there is someone who can help me out if it is possible at all. :) Below is a picture of how I want it to work. (its made in photoshop)

So I want to make the "bar total", "bar 1", "bar 2", "bar 3" and "bar 4" bold so the difference with the hours is more clear.

The labels are set in my code like this:

labels: [["bar total", "150 hour"], ["bar 1", "70 hour"], ["bar 2", "30 hour"], ["bar 3", "40 hour"], ["bar 4", "10 hour"]],

Iam using ChartJS version 2.3.0.

Any ideas?

Answer 1

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

Answer 2

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.

Answer 3

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! 𝐇𝐞𝐥𝐥𝐨 𝐖𝐨𝐫𝐥𝐝! 𝗛𝗲𝗹𝗹𝗼 𝗪𝗼𝗿𝗹𝗱! 𝐻𝑒𝑙𝑙𝑜 𝑊𝑜𝑟𝑙𝑑!

Answer 4

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';

Answer 5

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.

Answer 6

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