Bar

The simple version

Bars with their names and values, sorted, on the chart's own axis. The same structure with almost no styling: a good place to start your own.

How it’s built

The simple version has everything a chart needs and nothing more. Its slat contains only three blocks:

• a Label with edge="start", which puts the fruit’s name (d.name) in the gutter beside the chart,
• a Bar that runs from 0 to d.sold,
• a Label with at={d.sold}, which sits just past the end of the bar.

The Plot is given two lists, name and sold, and slat i takes item i of each. order={sortBy("sold", "desc")} sorts the slats, largest first.

The gallery version uses the same three blocks and adds four things:

• A Bar can hold anything, because a block takes children. The fruit is an <img> inside the Bar, and the Bar crops it to its own length. An icon, a button, or a chart of its own would work the same way.
• The axis is drawn by a Scale, one slat per tick. every(5, { ends: true }) picks which values get a tick, and the tick’s slat draws a Tick and a Label at d.at. The axis is made of the same blocks as the data.
• Each tick knows how far it is from the end of the scale. That distance is d.toEnd, in px, so a number that would collide with the end mark gets a class and the slat’s CSS hides it.
• The buttons change the data, not the chart. Rank turns order on and off, Desaturate passes dim to the Plot as data the slat reads as d.dim, and the slider replaces the first value. The chart redraws itself, because everything it shows is read from its props.

The fruit art is by FreeVector.com.