Bars and Rankings

Bars answer categorical magnitude questions through length from a shared baseline. Sort them when rank is part of the question, keep a semantic order when sequence matters, and use a lighter comparison mark when a filled bar would overstate the data.

Choose the comparison#

Use horizontal bars when labels are long or when the rank itself should read top to bottom. Layout, Axes, and Coordinates shows how categorical orientation and automatic guide margins fit together.

Rank categories with bars#

Sorting the scale domain makes the intended ranking explicit. Sorting only the input rows is insufficient when several layers or prepared datasets share the same categorical axis.

import { barY, defineChart } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'

const rows = [
  { category: 'Search', value: 84 },
  { category: 'Direct', value: 63 },
  { category: 'Referral', value: 47 },
  { category: 'Social', value: 31 },
]

const ranked = [...rows].sort((a, b) => b.value - a.value)

const chart = defineChart({
  marks: [barY(ranked, { x: 'category', y: 'value', inset: 2 })],
  scales: {
    x: {
      scale: () =>
        scaleBand<string>()
          .domain(ranked.map((row) => row.category))
          .padding(0.16),
    },
    y: {
      scale: scaleLinear,
      nice: true,
      grid: true,
      axis: { label: 'Weekly signups' },
    },
  },
})

export default chart

Open the larger catalog case to inspect responsive label rotation and data updates.

Bar charts normally include zero on the quantitative domain. Truncating that baseline turns small differences into large apparent changes.

Reduce visual weight with lollipops#

A lollipop keeps the common baseline and precise endpoint while replacing the filled rectangle with a thin link. It is useful for many categories or when the endpoint matters more than area.

Lollipop

EditRun

Compose the stem and endpoint as separate marks. The Rules, Links, Arrows, Vectors, and Ticks reference defines the link channels; Dot and Hexagon Marks defines the endpoint layer.

Compare two values per category#

Dumbbells emphasize the distance and direction between two endpoints without implying the combined area of grouped bars.

Dumbbell

EditRun

Label the endpoint semantics in a legend or surrounding text. If chronological order between two periods is the message, a slopegraph may be more direct; if absolute magnitudes must remain independently comparable, use grouped bars.

Explain a bridge to a total#

A waterfall requires cumulative preparation. Each contribution becomes an explicit lower and upper interval; the renderer should not guess whether a row is a delta, subtotal, or total.

Waterfall

EditRun

Keep the cumulative calculation in application data preparation and pass the prepared interval channels to a ranged bar or rectangle. The ownership boundary is described in Scales, and the geometry contracts are in Bar and Rect Marks.

Production checks#

• Preserve a semantic category order unless rank is the question.
• Include zero for ordinary bar magnitudes; use explicit interval endpoints for floating and waterfall bars.
• Avoid encoding the same distinction only by color. Labels, position, and shape can carry the essential comparison.
• Verify long labels and rotated ticks with Responsive Charts.
• Preserve unique category values when bars reorder or animate; supply key only when the category does not identify a row. See Dynamic Data and Animation.