Skip to content

Highcharts X axis date bold

Purushottam Mukhopadhyay

I am trying to make the date bold and red color in my highcharts x axis where time is also present in 12 hour format. I have done the following code but it is making all of the elements in x axis as bold as my time is in 12 hour format.

Highcharts.each($('.highcharts-xaxis-labels')[0].children, function(p, i) {
                    if (p.textContent.match(/[a-z]/i)) {
                      $(p).css({
                        fill: '#951515',
                        fontWeight: 'bold'
                      })
                    }
                  })

How do I achieve this ?

Output

Advertisement

Answer

Try this change in the condition to match.

If it is NOT a time, make it bold black.

Highcharts.each($('.highcharts-xaxis-labels')[0].children, function(p, i) {
  if ( !p.textContent.match(/dd[ap]m/i)) {
    $(p).css({
      fill: '#951515',
      fontWeight: 'bold'
    })
  }
})

dd[ap]m will match 04am, 16pm, etc.