Home

Bar list

A ranking: one row per name, longest first, a thin bar of its share of the first, the value in text, its share of the whole on hover.

ui.bar-listcomponents/ui/bar-list.tsx

Use case

For the AI

Use it for a top list: the best clients by sales, the products sold most, the cities orders come from, the reasons for returns. Every value is printed, so it reads without hovering; limit shows the first few. One series, so one colour (chart-card.ranking).

Use it when

  • The top clients, products or places
  • A long list of categories, sorted
  • Labels too long for a column chart

Use something else when

  • A few categories over time: Bar chart
  • The parts of one whole, five or fewer: Donut chart
  • The rows need several columns of facts: Table

Examples

  • Bistro Le Marchand$27,220
  • Ville de Joliette$21,500
  • Hôtel Rive-Nord$18,440
  • Clinique Belvédère$13,690
  • Ferme Lavoie$8,990

Code

Import

import { BarList } from "@/components/ui/bar-list"

Usage

<BarList
  items={clients.map((c) => ({ name: c.name, value: c.sales }))}
  format={money}
  limit={6}
  aria-label="Meilleurs clients"
/>

Rules

  • Sorted longest first (it sorts for you); never alphabetical.
  • The value is always in text at the end of the row.
  • One colour, the blue; a ranking is one series.