Accessible Pie Chart with {highcharter}

Re-creation of the Highcharts Accessible pie chart demo as an htmlwidget using the {highcharter} package by Joshua Kunst, and the Highcharts accessibility module.

library(highcharter)

## Registered S3 method overwritten by 'quantmod':
##   method            from
##   as.zoo.data.frame zoo

## Highcharts (www.highcharts.com) is a Highsoft software product which is

## not free for commercial and Governmental use

highchart() %>%
  # add dependencies
  hc_add_dependency(name = "modules/exporting.js") %>%
  hc_add_dependency(name = "modules/export-data.js") %>%
  hc_add_dependency(name = "modules/accessibility.js") %>%
  hc_add_dependency(name = "modules/pattern-fill.js") %>%
  hc_tooltip(
    valueSuffix = "%",
    borderColor = "#8ae"
  ) %>%
  hc_title(text = "Primary desktop/laptop screen readers") %>%
  hc_subtitle(text = "Source: WebAIM.") %>%
  hc_caption(text = "Pie chart demonstrating some accessibility features of Highcharts. The chart shows which screen reader is used as the primary screen reader by the respondents, with NVDA currently being the most popular one. The JAWS screen reader is following closely behind.") %>%
  hc_exporting(
    enabled = TRUE,
    accessibility = list(
      enabled = TRUE
    )
  ) %>%
  hc_add_series(
    type = "pie",
    name = "Screen reader usage",
    data = list(
      list(
        name = "NVDA",
        y = 40.6,
        color = list(
          pattern = list(
            path = "M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5",
            color = "#49a65e",
            height = 5,
            width = 5,
            patternTransform = "scale(1.4 1.4)"
          )
        )
      ),
      list(
        name = "JAWS",
        y = 40.1,
        color = list(
          pattern = list(
            path = "M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5",
            color = "#5f98cf",
            height = 5,
            width = 5,
            patternTransform = "scale(1.4 1.4)"
          )
        )
      ),
      list(
        name = "VoiceOver",
        y = 12.9,
        color = list(
          pattern = list(
            path = "M 2 0 L 2 5 M 4 0 L 4 5",
            color = "#f45b5b",
            height = 5,
            width = 5,
            patternTransform = "scale(1.4 1.4)"
          )
        )
      ),
      list(
        name = "ZoomText",
        y = 2,
        color = list(
          pattern = list(
            path = "M 0 2 L 5 2 M 0 4 L 5 4",
            color = "#434348",
            height = 5,
            width = 5,
            patternTransform = "scale(1.4 1.4)"
          )
        )
      ),
      list(
        name = "Other",
        y = 4.4,
        color = list(
          pattern = list(
            path = "M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5",
            color = "#708090",
            height = 5,
            width = 5,
            patternTransform = "scale(1.4 1.4)"
          )
        )
      )
    )
  ) %>%
  hc_plotOptions(
    series = list(
      dataLabels = list(
        enabled = TRUE,
        connectorColor = "#777",
        format = "<b>{point.name}</b>: {point.percentage:.1f} %"
      ),
      cursor = "pointer",
      borderWidth = 3
    ),
    accessibility = list(
      enabled = TRUE,
      keyboardNavigation = list(enabled = TRUE)
    )
  )

Notes on the code

As with the accessible line chart recreation, the code here doesn’t look terribly R-like (in fact, we’re not using a data frame object at all). The reason is the same, too: in order to get the dual encoding (in this case, colour + pattern), each item was defined individually. Making a basic pie chart using {highcharter} is not a heavy task.

The code above is very much reflects the fact that I reverse engineered this chart from the original version, which combined the indexed pattern definitions from the Highcharts pattern fill module with colours (see un-run JavaScript code below).

var clrs = Highcharts.getOptions().colors;
var pieColors = [clrs[2], clrs[0], clrs[3], clrs[1], clrs[4]];

// Get a default pattern, but using the pieColors above.
// The i-argument refers to which default pattern to use
function getPattern(i) {
    return {
        pattern: Highcharts.merge(Highcharts.patterns[i], {
            color: pieColors[i]
        })
    };
}

// Get 5 patterns
var patterns = [0, 1, 2, 3, 4].map(getPattern);

I imagine there’s a way to reference the patternIndex from the R code, but I wasn’t able to figure it out. I actually ran the JavaScript in my console to get the color/pattern definitions (e.g. Highcharts.patterns[0]).

Useful links

• Modules & plugins higcharter vignette (especially the infographic example for pattern fills, which uses in-line list data).

• Pattern fills documentation from Highcharts.

• Highcharts original code for accessible pie chart in JSFiddle.