Bullet graph (aka bullet chart)

[davidafuller01]

Summary

I didn't see this one amongst open or closed issues: the bullet graph. This is a relatively unknown data viz, but would be a useful addition to the Charts library: https://en.wikipedia.org/wiki/Bullet_graph

Examples

No response

Motivation

No response

Search keywords: Stephen Few

[michelengelen]

Thanks for opening this feature request @davidafuller01 ... I'll add it to the teams board to evaluate it. 🙇🏼

[alexfauquette]

That charts looks fairly close to a customised bar chart. If that can help here is a quick reproduction with a custom Target and Ranges components

https://codesandbox.io/p/sandbox/clever-cdn-x2ngpk?from-embed=

function Target({ value }: { value: number }) {
  const drawingArea = useDrawingArea();
  const xAxis = useXAxis();

  const x = xAxis.scale(value);
  const y1 = drawingArea.top + 0.1 * drawingArea.height;
  const y2 = drawingArea.top + 0.9 * drawingArea.height;

  return <line x1={x} x2={x} y1={y1} y2={y2} strokeWidth={3} stroke="black" />;
}

function Ranges({ ranges }: { ranges: { from: number; to: number; color }[] }) {
  const drawingArea = useDrawingArea();
  const xAxis = useXAxis();

  return ranges.map(({ from, to, color }) => (
    <rect
      x={xAxis.scale(from)}
      y={drawingArea.top}
      width={xAxis.scale(to) - xAxis.scale(from)}
      height={drawingArea.height}
      fill={color}
      stroke="none"
    />
  ));
}

[davidafuller01]

This is indeed a reasonable imitation. Thanks for the suggestion.

[alexfauquette]

Main limitation will probably be the a11y aspect, because the voice reader will see this as a bar chart. References, min/max will not be announced.

With a Gauge it will announce the value, and the min/max of the range