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)

Horizontal bar image description

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?

Possible duplicate of [Chart js. How to change font styles for "labels" array?](https://stackoverflow.com/questions/42315589/chart-js-how-to-change-font-styles-for-labels-array) — Deja, Sep 14 '17 at 14:16
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. — bergJ, Sep 15 '17 at 06:28
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. @bergJ is clearly requesting partial boldness of text. — Koshux, May 07 '18 at 08:53

score 12 · Answer 1 · answered Sep 15 '17 at 06:46

12

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

answered Sep 15 '17 at 06:46

Joel Lee

929
8
17

2

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. – bergJ Sep 15 '17 at 07:08
1

Keep in mind that this setting has moved to `options > scales > yAxes or xAxes > scaleLabel > fontStyle` – RubbelDieKatz Jul 11 '19 at 14:06

score 6 · Answer 2 · edited Sep 26 '19 at 13:40

6

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.

edited Sep 26 '19 at 13:40

Das_Geek

2,775
7
20
26

answered Sep 26 '19 at 13:12

Akanksha Raizada

107
1
8

score 3 · Answer 3 · answered Dec 04 '19 at 14:43

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! ! ! !

score 2 · Answer 4 · answered Mar 09 '19 at 02:08

2

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

answered Mar 09 '19 at 02:08

Nathan5x

159
1
5

score 2 · Answer 5 · answered Mar 26 '19 at 21:16

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.

score 1 · Answer 6 · answered Dec 24 '20 at 11:49

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

score 1 · Answer 7 · answered Jul 21 '23 at 22:46

1

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

answered Jul 21 '23 at 22:46

Manice18

11
2

score -1 · Answer 8 · edited Sep 09 '19 at 13:02

-1

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.

edited Sep 09 '19 at 13:02

IAmGroot

13,760
18
84
154

answered Sep 15 '17 at 06:45

jinlei

1

1

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. – bergJ Sep 15 '17 at 07:08

Chart.js: Make part of labels bold

8 Answers8

Linked