dreamRs / apexcharter

:bar_chart: R Htmlwidget for ApexCharts.js

Home Page:https://dreamrs.github.io/apexcharter

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Maximum numbers of dataLabels

Alik-V opened this issue · comments

Hi Victor,
I hope you had a good weekend!
I am trying to restrict the number of dataLabels I have on my barchart, but I can't make maxItems to work. Can you advise if this approach is incorrect when trying to make only a few datalabels to render? For example, ideally, I would like the dataLabels to render only on years 2020, 2025, 2030, 2035, 2040. Is it possible to do in apexcharter?

Here is a repex:

library(dplyr)
library(apexcharter)

df <- data.frame(
    time = c(2020:2040),
    x = runif(21, 50, 100),
    y = runif(21, 50, 100),
    z = runif(21, 50, 100),
    a = runif(21, 50, 100),
    b = runif(21, 50, 100)
  ) %>% 
    mutate_at(vars(x:b), funs(round(.,1)))

apexchart(auto_update = FALSE) %>%
    ax_chart(type = "bar", stacked = TRUE) %>%
    ax_plotOptions(bar = bar_opts(horizontal = FALSE, 
columnWidth = "95%", 
dataLabels = list(maxItems = 5) ) 
    ) %>%
    ax_grid(show = FALSE) %>%
    ax_series(list(name = "x",
                   data = df$x),
              list(name = "y",
                   data = df$y),
              list(name = "z",
                   data = df$z)) %>%
    ax_xaxis(categories = df$time) 

Hello Alik,

Everything is fine (at a personal level at least) in the post-lockdown France, hope your well too.

A solution could be to turn your x axis into datetime to have auto formatting, otherwise you can use a JavaScript function as formatter like below (note that you'll have to use a formatter for x-axis AND tooltip, since by default x-axis formatter applies to tooltip as well).

apexchart(...) %>%
 # [truncated]
  ax_xaxis(
    categories = df$time,
    labels = list(
      formatter = JS("function(value) {if (value % 5 == 0) return value;}")
    )
  ) %>% 
  ax_tooltip(
    x = list(
      formatter = JS("function(value) {return 'Year ' + value;}")
    )
  )

Note: value % 5 is value modulo five in javascript, same as 25 %% 5 in R

Victor