JohnCoene / echarts4r

🐳 ECharts 5 for R
http://echarts4r.john-coene.com/
Other
587 stars 82 forks source link

Is it possible to use HTML in label formatter? #504

Open rdatasculptor opened 1 year ago

rdatasculptor commented 1 year ago

Life would be a lot easier if I was allowed to use HTML in label formatting like the way that is possible in tooltips :) Is there a way, or a hack of some kind that would make this possible?

As an example, let's compare formatting of labels and tooltips:

df <- data.frame(xaxis = c(1,2,3), yaxis = c(1,2,3), label= c("<span><b>hi</b></span>", "hello", "hey"))

# whithout proper dealing with HTML
df %>% 
  e_charts(xaxis) %>%
  e_scatter(yaxis, bind = label,
            label = list(show = TRUE,
                         formatter = '{b}'))

# with proper dealing with HTML
df %>% 
  e_charts(xaxis) %>%
  e_scatter(yaxis) %>%
  e_add_nested('extra', label) %>% 
  e_tooltip(triggerOn="mousemove|click",
            formatter = htmlwidgets::JS(
              'function(params){
        return params.data.extra.label;
      }'
            ))

As you can see, the label formatter doesn't know how to use HTML, whilst the tooltip formatter does. Is there a way to make label formatter behave the same way as the tooltip formatter?

Many thanks in advance!

beatrizmilz commented 10 months ago

Whenever I need to configure the formatting of the text/number displayed in the tooltip, I use JS. I would love to know when there is the possibility to use HTML as well.. :)

rdatasculptor commented 10 months ago

@beatrizmilz I agree, but the inconvenience I encounter is that the label can't deal with html like the way tooltip does

JohnCoene commented 10 months ago

I think echarts expects us to use the rich option for that but it's a bit convoluted.

See https://echarts.apache.org/examples/en/editor.html?c=doc-example%2Ftext-block-fragment

rdatasculptor commented 10 months ago

I must admit I never really tried that. My first thought was: why choose such a complex approach instead of regular html? But this example is quite clear. Thank you for pointing us to it @JohnCoene !

JohnCoene commented 10 months ago

Your initial intuition looks good to me: it should work. I'm not sure why echarts.js does not allow HTML in the labels.