Span Chart

Description

A span chart (also called a range chart) encodes two quantitative values per category as the start and end of a bar or mark, producing a floating bar that conveys an interval. Unlike a standard bar chart where every bar is anchored at zero, span chart bars float between their minimum and maximum, drawing the reader’s attention to the gap between two values rather than their absolute magnitudes.

Span charts are particularly useful for showing ranges such as temperature highs and lows, salary bands, project timelines (when used horizontally), or confidence intervals. The length of each bar encodes the size of the range, while the position along the value axis encodes the absolute level. Readers can thus compare both the magnitude and the spread of values across categories in a single view.

Because bars are not anchored to a common baseline, comparing absolute start or end values across categories requires more cognitive effort than in a standard bar chart. However, comparing range widths is straightforward since the bar lengths are directly comparable. Adding reference lines or annotations can mitigate the baseline problem when absolute values also matter.

When to Use

• Displaying minimum-maximum ranges such as daily temperature highs/lows or salary bands
• Showing confidence intervals, error margins, or uncertainty ranges alongside point estimates
• Comparing the spread or variability across categories
• Representing scheduled durations (start-to-end) for tasks or events on a categorical axis

When NOT to Use

• When only a single value per category is needed — use a bar chart
• When precise start/end values matter more than the range — use a table or dot plot with labeled endpoints
• When categories have temporal ordering and the focus is trend — use a line graph with a shaded confidence band
• When ranges overlap extensively and many categories exist — the chart becomes cluttered; consider a box plot for distributions

Anatomy

• Floating bars: Rectangular marks that begin at the range’s lower bound and end at the upper bound, not anchored at zero.
• Category axis: Lists the discrete groups (one bar per category).
• Value axis: A quantitative scale spanning the full range of data. Does not need to start at zero since the encoding is position-to-position, not position-to-baseline.
• Reference line: An optional vertical or horizontal line at a meaningful threshold (e.g., average, budget target).
• Labels: Category names on the category axis; optional annotations at bar endpoints for precise values.

Variations

• Gantt chart: A horizontal span chart where the value axis is time, used for project scheduling.
• Dumbbell chart (connected dot plot): Replaces the floating bar with two dots connected by a line, emphasizing the endpoints rather than the filled range.
• Diverging range chart: Bars extend in both directions from a central reference value, useful for showing deviations above and below a benchmark.
• Stacked span chart: Multiple ranges stacked per category to show nested intervals (e.g., inner 50% and outer 95% confidence intervals).

Code Reference

// Observable Plot - horizontal span chart
Plot.plot({
  marks: [
    Plot.barX(data, {
      y: "category",
      x1: "low",
      x2: "high",
      fill: "steelblue",
      tip: true
    }),
    Plot.dot(data, {
      y: "category",
      x: "median",
      fill: "white",
      stroke: "steelblue",
      r: 3
    })
  ],
  x: { label: "Value" },
  y: { label: null }
})