Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

highcharter hc_axis change color of one x-axis label only #790

Open
learning-freak opened this issue Mar 1, 2023 · 1 comment
Open

highcharter hc_axis change color of one x-axis label only #790

learning-freak opened this issue Mar 1, 2023 · 1 comment

Comments

@learning-freak
Copy link

learning-freak commented Mar 1, 2023

Hi,
This my dataset

df <- data.frame(dose=c("D0.5", "D1", "D2"),
                 len=c(4.2, 10, 29.5))

I want to change the color of just one label (the label "D1") in red (not all the labels).
I saw this documentation :
https://api.highcharts.com/highcharts/xAxis.labels.formatter
and I tried to do the same thing but nothing has changed

How do I apply style to individual labels to get only the label "D1" in red ?
This is what I did :

df <- data.frame(dose=c("D0.5", "D1", "D2"),
                 len=c(4.2, 10, 29.5))


highchart() %>%
  hc_add_series(
    data = df$len,
    type = 'line'
  ) %>%
  hc_xAxis(categories = df$dose,
           labels = list(
             formatter = JS(
               "
                       function() {
          if (this.value =='D1' ) {
            return '<span style='fill: red;'>' + this.value + '</span>';
          }
          return this.value;
        }
                       "
             )
           ))

Some help would be appreciated

@jsinnett
Copy link

jsinnett commented Mar 21, 2023

You're close but you need to use double quotes and escape them for the style attribute. Also I think 'color' is more appropriate when stylizing text.

highchart() %>%
  hc_add_series(
    data = df$len,
    type = 'line'
  ) %>%
  hc_xAxis(categories = df$dose,
           labels = list(
             # useHTML = T,
             formatter = JS(
               "function() {
                  if (this.value =='D1' ) {
                  console.log(this.value)
                    return '<span style=\"color: red;\">' + this.value + '</span>'; 
                  }
                  return this.value;
                }"
             )
  ))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants