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?

Mockingbird

Possible duplicate of Chart js. How to change font styles for "labels" array? – Mariettamariette

No this is different. In the link you are posting is the question to make all the labels bold. In my question iam asking if there is a way to make just the bar labels bold and not the hour labels. – Mockingbird

I have also been seeking an option whereby only portions of the labels are bold and have found no documentation which could lead us to a solution. In my use case, I would like to show the date on the x-axis such as Friday 11/03 but Friday is bold where 11/03 is not. From what I have read, the only way to achieve this is to generate the labels manually and handle the logic ourselves. Also @Deja, please read the question and diagram carefully. @Mockingbird is clearly requesting partial boldness of text. – Harmonia

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

Farrish

Thanks for the input but this is not what Iam looking for. I've edited my question to make it more clear with an example of what I want. – Mockingbird

Keep in mind that this setting has moved to options > scales > yAxes or xAxes > scaleLabel > fontStyle – Roubaix

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.

Solemnity

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

Skricki

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

Tiddlywinks

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.

Unilobed

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

Combustor

Answer 7

Updating as of version: 4.3.0: (Example: I want to update the labels of y axis and make them bold)

scale:{
       y:{
          ticks:{
                 font:{
                       weight: 'bold'
                 }
          }
       }
 }

Entwine

Answer 8

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.

Blackmon

Thanks for the input but this is not what Iam looking for. I've edited my question to make it more clear with an example of what I want. – Mockingbird