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

React modern charts components built on recharts

---
title: ComposedChart
description: ComposedChart renders bar and line series on the same chart with independent left and right y-axes, sharing a single x-axis and a unified tooltip.
category: Charts
order: 2
---

import DemoAxis from './demos/axis.tsx?demo';
import DemoDomain from './demos/domain.tsx?demo';
import DemoExample from './demos/example.tsx?demo';
import DemoIndex from './demos/index.tsx?demo';
import DemoLoading from './demos/loading.tsx?demo';
import DemoNoData from './demos/noData.tsx?demo';

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

## Usage example

A classic dual-axes chart: request count (bar, left axis) + average cost (line, right axis).

<Demo of={DemoExample} />

## Usage example with axis labels

<Demo of={DemoAxis} />

## Custom y-axis domain

Recharts defaults number axes to `[0, auto]`, which flattens series in a narrow range (e.g. success rate 80–95%). Pass `domain` on `yAxisLeft` / `yAxisRight` to control the scale — same values as [recharts `YAxis.domain`](https://recharts.org/en-US/api/YAxis#domain).

<Demo of={DemoDomain} />

## No Data

<Demo of={DemoNoData} />

## Loading

<Demo of={DemoLoading} />

## API

<Api name="ComposedChart" />