@lobehub/charts/es/BarList/index.mdx

React modern charts components built on recharts

---
title: BarList
description: Horizontal bars with a customizable label inside.
category: Visualizations
---

import DemoIndex from './demos/index.tsx?demo';
import DemoExample from './demos/example.tsx?demo';
import DemoClickEvent from './demos/clickEvent.tsx?demo';
import DemoCustomColors from './demos/customColors.tsx?demo';

<Demo of={DemoIndex} layout="bare" />

## Usage example

You can also pass an `href` into the data, then your datapoint gets rendered as a clickable link with `target="_blank"`.

<Demo of={DemoExample} />

## Usage example with click event

The example below shows an interacive chart using the `onValueChange` prop.

<Demo of={DemoClickEvent} />

## Usage example with a custom colors

The example below shows a chart with custom `colors`.

<Demo of={DemoCustomColors} />

## API

<Api name="BarList" />