Gráfico de donut

Como verás, hacer gráficos en highcharter, lo básico al menos, es muy sencillo. La “complicación” viene a la hora de personalizar el gráfico o añadir features concretas en cada caso.

En este guía, ya habíamos hablado sobre qué es un gráfico de donut. Te recomiendo leerlo si nunca habías oído hablar de este tipo de gráficos.

El tema de los gráficos lo puedes encontrar en el capítulo sobre cómo crear temas en highcharter y configurarlo al inicio de la sesión así:

library(highcharter)

options(highcharter.theme = elartedeldato_theme)

Cómo hacer un gráfico de donut en highcharter

En esta entrada continuamos utilizando los datos categóricos generados en posts anteriores. Son sencillos y perfectos para estos ejemplos.

df_cat <- dplyr::tribble(
  ~x, ~y,
  "A", 10,
  "B", 23,
  "C", 7,
  "D", 16
)

df_cat

# A tibble: 4 × 2
  x         y
  <chr> <dbl>
1 A        10
2 B        23
3 C         7
4 D        16

En highcharter, para hacer un gráfico de donut no existe la opción type = "donut" sino que se realiza un gráfico de tarta y se “vacía” el interior con la opción innerSize. Veamos un ejemplo.

hchart(
    df_cat,
    type = "pie",
    innerSize = 300,
    hcaes(x = x, y = y)
  ) |>
  hc_title(text = "<b>Gráfico de donut</b>") |>
  hc_subtitle(text = "<i>Ejemplo de Gráfico de donut en Highcharter con datos generados</i>") |>
  hc_credits(enabled = TRUE, text = "http://elartedeldato.com")

El valor del parámetro innerSize se ajusta en función del ancho que queramos para los sectores. Por ejemplo, un innerSize más pequeño, daría lugar a un gráfico más cargado.

library(highcharter)

hchart(
    df_cat,
    type = "pie",
    innerSize = 100,
    hcaes(x = x, y = y)
  ) |>
  hc_title(text = "<b>Gráfico de donut</b>") |>
  hc_subtitle(text = "<i>Ejemplo de Gráfico de donut en Highcharter con datos generados</i>") |>
  hc_credits(enabled = TRUE, text = "http://elartedeldato.com")

Advertencia

Ten cuidado con el tamaño eligido! En highcharter, si añades un valor muy alto de innerSize, los sectores quedan tan finos que el gráfico no se muestra!

Cómo personalizar etiquetas de un gráfico de donut en highcharter

Como en el gráfico de tarta, la forma de personalizar las etiquetas se hace a través de la función dataLabels() exactamente igual que que lo hicimos en aquel caso.

hchart(
    df_cat,
    type = "pie",
    innerSize = 300,
    hcaes(x = x, y = y),
    dataLabels = list(
        format = "<b>{point.name}</b><br>{point.percentage:.1f} %<br>total: {point.total}"
      )
  ) |>
  hc_title(text = "<b>Gráfico de donut</b>") |>
  hc_subtitle(text = "<i>Ejemplo de gráfico de donut con datos generados</i>") |>
  hc_credits(enabled = TRUE, text = "http://elartedeldato.com")   

Cómo añadir información dentro del gráfico de donut

Otra característica interesante que nos proporciona highcharter, es la posibilidad de añadir la información de cada sector en el interior del gráfico cada vez que nos colocamos sobre un sector, lo que llamamos hover en el mundo javascript.

Para ello, tenemos que hacer uso de la función hc_tooltip().

hchart(
    df_cat,
    type = "pie",
    innerSize = 300,
    hcaes(x = x, y = y),
    dataLabels = list(
        format = "<b>{point.name}</b>"
      )
  ) |>
  hc_title(text = "<b>Gráfico de donut</b>") |>
  hc_subtitle(text = "<i>Ejemplo de gráfico de donut con datos generados</i>") |>
  hc_credits(enabled = TRUE, text = "http://elartedeldato.com") |>
  hc_tooltip(
    useHTML = TRUE,
    style = list(fontSize = "30px"),
    headerFormat = "",
    pointFormat = "<div style='text-align: center;'> <b>Categoría {point.name}</b><br>{point.percentage:.1f} %<br> Total: {point.total}</div>",
    positioner = JS(
      "function () {

        /* IMPORTANT! */
        xp =  this.chart.chartWidth/2 - this.label.width/2
        yp =  this.chart.chartHeight/2 - this.label.height/2

        return { x: xp, y: yp };

      }"
    ),
    shadow = FALSE,
    borderWidth = 0,
    backgroundColor = "transparent",
    hideDelay = 1000
  )

Nota

Esta última sección está basada en el post de Joshua Kunst sobre el uso de tooltips en Highcharter.