R highcharter editing dataLabels format

Question

I have a function to plot a bubble highchart. Among other things one argument of the function is a character label which is laid on top of the bubble, but which is also called in hcaes together with more information when holding the mouse over a bubble. I would like to edit this label without editing the data itself (or change it later in the pipe), that is, the original data is showed when hovering over the bubble, but what is laid on top of the bubble is edited. I have added the labels like this:

hc_plotOptions(series = list(
      colorByPoint = TRUE,
      dataLabels = list(allowOverlap =TRUE,enabled =TRUE, format=paste0('{point.', label, '}')))

Is this possible?

We can try to help achieve this in HC, do you have a demo in JS and could you show an orientation picture because I don't understand from your description. — Sebastian Hajdus, May 11 '22 at 07:43
Do you mean code in JavaScript? Unfortunately I do not have a demo and I cannot show the plot. But the plot is similar in nature to [this](https://stackoverflow.com/questions/55810060/highcharts-bubble-chart-datalabels-not-display), except when I hover over the bubble it will show the label as well as some more information. I would like to change just the label but not the underlying data. — Preben, May 11 '22 at 11:18
My workaround for this was just to add another TRUE/FALSE argument to the function, and before starting the highchart pipe use an if statement to create another column, do some string manipulation and renaming the label to the new column like so `dat <- dat %>% mutate(!!str_c(label,xx) := if_else(... , .data[[label]])) label <- str_c(label,xx)` — Preben, May 11 '22 at 14:58

score 1 · Answer 1 · answered May 11 '22 at 20:35

Series bubble events give you possibility to change format at dataLabels. You can update them with the point events state, e.g. mouseover, and add a condition for more control.

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
      },
      point: {
        events: {
          mouseOver() {
            if (this.x >= 80) {
              console.log(this.series.dataLabels);
              this.series.update({
                dataLabels: {
                  format: 'Very long text!'
                }
              })
            } else {
              this.series.update({
                dataLabels: {
                  format: 'text!'
                }
              })
            }

          }
        }
      }
    },
  },

demo: https://jsfiddle.net/BlackLabel/b2L3duoc/

R highcharter editing dataLabels format

1 Answers1