Photoshop Question posted in
The official user guide can be found here.

Chart.js: Make part of labels bold – Photoshop

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?

Tags:

7

Answers


  1. 0 
    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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';
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
  5. 0

    After applying this
    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.

    Login or Signup to reply.
  6. 0

    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!
    π‡πžπ₯π₯𝐨 𝐖𝐨𝐫π₯𝐝!
    𝗛𝗲𝗹𝗹𝗼 π—ͺ𝗼𝗿𝗹𝗱!
    π»π‘’π‘™π‘™π‘œ π‘Šπ‘œπ‘Ÿπ‘™π‘‘!

    Login or Signup to reply.
  7. 0

    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 
        },
      },
    ],
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search