Bar List

Usage

tsx

import { BarList, Chart, useChart } from "@chakra-ui/charts"

tsx

<BarList.Root>
  <BarList.Content>
    <BarList.Bar />
    <BarList.Value />
  </BarList.Content>
</BarList.Root>

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" },
  // ...
})

Pass the valueFormatter prop to the BarList.Value component to format the value of the bars.

tsx

<BarList.Value valueFormatter={(value) => value.toLocaleString()} />

To add name and value labels to the bars, use the BarList.Label component.

tsx

<BarList.Label title="Search Engine" flex="1">
  <BarList.Bar />
</BarList.Label>

To make the bars render a link, pass the label prop to the BarList.Bar component.

tsx

<BarList.Bar
  label={({ payload }) => <a href={payload.href}>{payload.name}</a>}
/>

Pass the tooltip prop to the BarList.Bar component to show a tooltip when hovering over the bar.

Here's an example of how to render the value and percent of the bars.