Bar List

Ranked list with progress bars — distribution by city, channel, category, or any volume metric.

Default

Properties by city

Imóveis por Cidade

Unidades

São Paulo – Capital
4.823
Campinas
2.941
Rio de Janeiro
2.710
Belo Horizonte
1.982
Curitiba
1.654

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

<BarList />

// Customizado:
<BarList
  title="Leads por Canal"
  valueLabel="Leads"
  initialCount={5}
  items={[
    { name: "Organic Search", value: 4823 },
    { name: "Direct", value: 2941 },
    { name: "Referral", value: 1982 },
  ]}
  valueFormatter={(n) => n.toLocaleString("pt-BR")}
/>

Currency formatting

Revenue by region

Receita por Região

Receita

São Paulo – Capital
R$ 8,7 mi
Campinas
R$ 5,3 mi
Rio de Janeiro
R$ 4,9 mi
Belo Horizonte
R$ 3,6 mi
Curitiba
R$ 3 mi

<BarList
  title="Receita por Região"
  valueLabel="Receita"
  items={[...]}
  valueFormatter={(n) =>
    Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
      notation: "compact",
    }).format(n)
  }
/>