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

React modern charts components built on recharts

---
title: DataBars
description: Components to indicate progress, performance, or status. For example, an individual score compared to a benchmark, the length of a process, or the deviation of a value.
category: Visualizations
---

import DemoProgressBar from './demos/ProgressBar.tsx?demo';
import DemoMarkerBar from './demos/MarkerBar.tsx?demo';
import DemoDeltaBar from './demos/DeltaBar.tsx?demo';
import DemoCategoryBar from './demos/CategoryBar.tsx?demo';

## Progress Bar

<Demo of={DemoProgressBar} layout="center" />

## Marker Bar

<Demo of={DemoMarkerBar} layout="center" />

## Delta Bar

<Demo of={DemoDeltaBar} layout="center" />

## Category Bar

<Demo of={DemoCategoryBar} layout="center" />

## API

<Api name="ProgressBar" />

<Api name="MarkerBar" />

<Api name="DeltaBar" />

<Api name="CategoryBar" />