Bar List
Used to display categorical data with horizontal bars, showing comparisons between different categories or items
ChatGPT
Google
Bing
Direct
Github
Yandex
Yahoo
1.35M
1.2M
200K
100K
100K
100K
20K
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Bar />
<BarList.Value />
</BarList.Content>
</BarList.Root>
)
}
Usage
import { BarList, Chart, useChart } from "@chakra-ui/charts"<BarList.Root>
<BarList.Content>
<BarList.Bar />
<BarList.Value />
</BarList.Content>
</BarList.Root>Examples
Sort Order
Set the sort key to { by: "value", direction: "asc" } to sort the bars in
ascending order.
const chart = useChart<BarListData>({
sort: { by: "value", direction: "asc" },
// ...
})Yahoo
Direct
Github
Yandex
Bing
Google
ChatGPT
20K
100K
100K
100K
200K
1.2M
1.35M
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "asc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Bar />
<BarList.Value />
</BarList.Content>
</BarList.Root>
)
}
Format Value
Pass the valueFormatter prop to the BarList.Value component to format the
value of the bars.
<BarList.Value valueFormatter={(value) => value.toLocaleString()} />Created
Initial Contact
Booked Demo
Closed
120 (45%)
90 (34%)
45 (17%)
10 (4%)
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Created", value: 120 },
{ name: "Initial Contact", value: 90 },
{ name: "Booked Demo", value: 45 },
{ name: "Closed", value: 10 },
],
series: [{ name: "name", color: "pink.subtle" }],
})
const getPercent = (value: number) =>
chart.getValuePercent("value", value).toFixed(0)
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Bar />
<BarList.Value
valueFormatter={(value) => `${value} (${getPercent(value)}%)`}
/>
</BarList.Content>
</BarList.Root>
)
}
Labels
To add name and value labels to the bars, use the BarList.Label component.
<BarList.Label title="Search Engine" flex="1">
<BarList.Bar />
</BarList.Label>Search Engine
ChatGPT
Google
Bing
Direct
Github
Yandex
Yahoo
Downloads
1.35M
1.2M
200K
100K
100K
100K
20K
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Label title="Search Engine" flex="1">
<BarList.Bar />
</BarList.Label>
<BarList.Label title="Downloads" titleAlignment="end">
<BarList.Value />
</BarList.Label>
</BarList.Content>
</BarList.Root>
)
}
Link
To make the bars render a link, pass the label prop to the BarList.Bar
component.
<BarList.Bar
label={({ payload }) => <a href={payload.href}>{payload.name}</a>}
/>"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Created", value: 120, href: "#" },
{ name: "Initial Contact", value: 90, href: "#" },
{ name: "Booked Demo", value: 45, href: "#" },
{ name: "Closed", value: 10, href: "#" },
],
series: [{ name: "name", color: "pink.subtle" }],
})
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Bar
label={({ payload }) => <a href={payload.href}>{payload.name}</a>}
/>
<BarList.Value />
</BarList.Content>
</BarList.Root>
)
}
Tooltip
Pass the tooltip prop to the BarList.Bar component to show a tooltip when
hovering over the bar.
Search Engine
ChatGPT
Google
Bing
Direct
Github
Yandex
Yahoo
Downloads
1.35M
1.2M
200K
100K
100K
100K
20K
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle", label: "Search Engine" }],
})
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Label title="Search Engine" flex="1">
<BarList.Bar tooltip />
</BarList.Label>
<BarList.Label title="Downloads" titleAlignment="end">
<BarList.Value />
</BarList.Label>
</BarList.Content>
</BarList.Root>
)
}
Multiple values
Here's an example of how to render the value and percent of the bars.
Search Engine
ChatGPT
Google
Bing
Direct
Github
Yandex
Yahoo
Downloads
1.35M
1.2M
200K
100K
100K
100K
20K
%
43.88%
39.15%
6.53%
3.26%
3.26%
3.26%
0.65%
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart<BarListData>({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
const getPercent = (value: number) =>
chart.getValuePercent("value", value).toFixed(2)
return (
<BarList.Root chart={chart}>
<BarList.Content>
<BarList.Label title="Search Engine" flex="1">
<BarList.Bar />
</BarList.Label>
<BarList.Label title="Downloads" minW="16" titleAlignment="end">
<BarList.Value />
</BarList.Label>
<BarList.Label title="%" minW="16" titleAlignment="end">
<BarList.Value valueFormatter={(value) => `${getPercent(value)}%`} />
</BarList.Label>
</BarList.Content>
</BarList.Root>
)
}