Create a radial bar chart. — radial_bar

A radial bar chart (sometimes called a multi-ring progress chart or "activity rings") draws each category as a concentric circular track. A faint background track shows the full scale, and a colored arc with rounded ends sweeps along it in proportion to the category's value relative to max. It is a compact way to compare a handful of progress or completion rates. The look is inspired by the radialBar chart of the ApexCharts JavaScript library, reimplemented here in plain D3.

The first row of data is drawn as the outermost ring. The arcs sweep in on load, each ring is labelled at the start of its track, and the center shows the average (or total) of the values. Hovering a ring highlights it, replaces the center text with that ring's name and value, and shows a tooltip.

By default the rings cover 270 degrees (startAngle = 0, endAngle = 270), leaving the top-left quadrant free for the ring labels. Angles are in degrees, measured clockwise from 12 o'clock. Use endAngle = 360 for full circles (labels then follow the curve of each track), or for example startAngle = -90, endAngle = 90 for a semicircle gauge.

Usage

radial_bar_chart(
  data,
  label,
  value,
  max = 100,
  startAngle = 0,
  endAngle = 270,
  colors = NULL,
  trackCol = "#ececec",
  hollow = 0.35,
  ringGap = 0.3,
  roundedCaps = TRUE,
  showLabels = TRUE,
  showValues = TRUE,
  labelFontSize = 12,
  centerValue = c("average", "total", "none"),
  centerLabel = NULL,
  centerFontSize = NULL,
  valueFormat = ",.0f",
  suffix = NULL,
  hover = TRUE,
  animate = TRUE,
  duration = 1200,
  title = NULL,
  titleFontSize = 16,
  font = "Verdana, Geneva, Tahoma, sans-serif",
  bgcol = "white",
  textCol = "#333333",
  width = NULL,
  height = NULL
)

Arguments

data: The data frame containing the variables to consider (one row per ring).
label: The name of the column holding the ring labels.
value: The name of the numeric (non-negative) column holding the ring values.
max: The value that corresponds to a full sweep of the track. Values above max are capped at a full sweep (with a warning). Defaults to 100.
startAngle: Angle in degrees at which every track starts, measured clockwise from 12 o'clock. Defaults to 0.
endAngle: Angle in degrees at which every track ends. Must be greater than startAngle and at most startAngle + 360. Defaults to 270.
colors: Optional. A vector of colors, one per ring (recycled if shorter). Defaults to NULL, which uses a built-in palette.
trackCol: Color of the background tracks. Defaults to "#ececec".
hollow: Size of the empty center as a fraction (0 to 0.9) of the outer radius. Defaults to 0.35.
ringGap: Fraction (0 to 0.9) of each ring's band left empty between neighbouring tracks. Defaults to 0.3.
roundedCaps: Whether the arcs (and partial tracks) have rounded ends. Defaults to TRUE.
showLabels: Whether to label each ring at the start of its track. Defaults to TRUE.
showValues: Whether to append the formatted value to each ring label (e.g. "Vimeo: 76%"). Defaults to TRUE.
labelFontSize: Font size of the ring labels. Defaults to 12.
centerValue: What to show in the center when nothing is hovered: "average" (default), "total" or "none".
centerLabel: Optional. Text shown above the center value. Defaults to "Average" or "Total" depending on centerValue.
centerFontSize: Optional. Font size of the big center value. Defaults to NULL, which sizes it to fit the hollow.
valueFormat: A d3-format specifier used to display values. Defaults to ",.0f".
suffix: Optional. Text appended to every displayed value. Defaults to NULL, which uses "%" when max = 100 and nothing otherwise.
hover: Whether hovering a ring highlights it, updates the center text and shows a tooltip. Defaults to TRUE.
animate: Whether the arcs sweep in on first render. Defaults to TRUE.
duration: Duration of the sweep animation in milliseconds. Defaults to 1200.
title: Optional. Title of the chart.
titleFontSize: Font size of the chart title. Defaults to 16.
font: The font family used for all text. Defaults to "Verdana, Geneva, Tahoma, sans-serif".
bgcol: Background color of the SVG. Defaults to "white".
textCol: Color of the title, labels and center text. Defaults to "#333333".
width: Optional. The width of the SVG output.
height: Optional. The height of the SVG output.

Value

An SVG radial bar chart.

Examples

# Share of users active on each platform (percentages)
platforms <- data.frame(
  platform = c("Vimeo", "Messenger", "Facebook", "LinkedIn"),
  share    = c(76, 67, 61, 90)
)

radial_bar_chart(
  data  = platforms,
  label = "platform",
  value = "share",
  title = "Weekly active users (share of total)"
)


# Full circles, total in the center, custom colors and a custom maximum
sales <- data.frame(
  region = c("North", "South", "East", "West", "Central"),
  units  = c(420, 310, 275, 190, 120)
)

radial_bar_chart(
  data        = sales,
  label       = "region",
  value       = "units",
  max         = 500,
  endAngle    = 360,
  centerValue = "total",
  centerLabel = "Units sold",
  colors      = c("#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e"),
  title       = "Units sold by region (target: 500)"
)


# Gauge layout open at the bottom, without values in the ring labels
radial_bar_chart(
  data       = platforms,
  label      = "platform",
  value      = "share",
  startAngle = -135,
  endAngle   = 135,
  hollow     = 0.45,
  showValues = FALSE,
  trackCol   = "#f2f2f2"
)