dreamRs / apexcharter

:bar_chart: R Htmlwidget for ApexCharts.js
https://dreamrs.github.io/apexcharter
Other
138 stars 15 forks source link

Combining facets with annotations #57

Open bergatronic opened 2 years ago

bergatronic commented 2 years ago

Hi all,

I am creating an apexchart split into facets and I would like to add annotations to one specific sub-graph (facet).

However, adding a point annotation I see that it is added to all graphs.

Is there a way to add an annotation to a specific facet of the graph?

Below is a small reproducible example showing the behaviour.

Many thanks in advance

library(apexcharter)
apex(iris, aes(x = Sepal.Length, y = Sepal.Width), type = "scatter" ) %>% 
  ax_facet_wrap(facets = vars(Species)) %>% 
  ax_annotations(points = list(list(
    x = 6,
    y = 3,
    marker = list(
      size = 2,
      fillColor = "red",
      strokeColor = "red",
      radius = 1
    ),
    label = list(
      text = "Test",
      offsetY = 0,
      borderColor = "#FF4560",
      style = list(
        color = "#fff",
        background = "#FF4560"
      )
    )
  )))
pvictor commented 2 years ago

That's currently not implemented. To achieve this, you'll have to make individual charts before regrouping them in a grid :

library(apexcharter)
ax1 <- subset(iris, Species == "setosa") |> 
  apex(aes(x = Sepal.Length, y = Sepal.Width), type = "scatter", height = "350px") 
ax2 <- subset(iris, Species == "versicolor") |> 
  apex(aes(x = Sepal.Length, y = Sepal.Width), type = "scatter", height = "350px") 
ax3 <- subset(iris, Species == "virginica") |> 
  apex(aes(x = Sepal.Length, y = Sepal.Width), type = "scatter", height = "350px") 

apex_grid(
  ax1,
  ax2 %>% 
    ax_annotations(points = list(list(
      x = 6,
      y = 3,
      marker = list(
        size = 2,
        fillColor = "red",
        strokeColor = "red",
        radius = 1
      ),
      label = list(
        text = "Test",
        offsetY = 0,
        borderColor = "#FF4560",
        style = list(
          color = "#fff",
          background = "#FF4560"
        )
      )
    ))),
  ax3
)