{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Bar list","description":"Display ranked data in a clean, horizontal bar list similar to Google Analytics. It provides a visual representation of key metrics for quick insights.","url":"https://intentui.com/docs/components/visualizations/bar-list","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/visualizations/bar-list"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Visualizations","item":"https://intentui.com/docs/components/visualizations"},{"@type":"ListItem","position":5,"name":"Bar list","item":"https://intentui.com/docs/components/visualizations/bar-list"}]}]}
Bar list
This component has been deprecated. We recommend using the Leaderboard component instead.
Loading...
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/bar-list
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install tailwind-merge
Examples
Controlled
Controlled bar lists allow you to manage the data and interactions dynamically, making it easier to update or change the displayed information based on user actions or other events.
Loading...
Component API
BarList extends the native <div> element.
classNamestringdataBar<T>[]Default:
[]onValueChange(payload: Bar<T>) => voidsortOrder"ascending" | "descending" | "none"Default:
descendingvalueFormatter(value: number) => stringDefault:
(value) => value.toString()