---
title: ComposedChart
description: "`ComposedChart` is a component for drawing composed charts to compare multiple sets of data."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/composed-chart.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-composedchart--basic
---

```tsx
interface Data {
  date: string
  desktop: number
  mobile: number
  tablet: number
}

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo<Data[]>(
  () => [
    {
      date: "2026-03-01",
      desktop: faker.number.int({ max: 5000, min: 1000 }),
      mobile: faker.number.int({ max: 5000, min: 1000 }),
      tablet: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      date: "2026-04-01",
      desktop: faker.number.int({ max: 5000, min: 1000 }),
      mobile: faker.number.int({ max: 5000, min: 1000 }),
      tablet: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      date: "2026-05-01",
      desktop: faker.number.int({ max: 5000, min: 1000 }),
      mobile: faker.number.int({ max: 5000, min: 1000 }),
      tablet: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      date: "2026-06-01",
      desktop: faker.number.int({ max: 5000, min: 1000 }),
      mobile: faker.number.int({ max: 5000, min: 1000 }),
      tablet: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      date: "2026-07-01",
      desktop: faker.number.int({ max: 5000, min: 1000 }),
      mobile: faker.number.int({ max: 5000, min: 1000 }),
      tablet: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      date: "2026-08-01",
      desktop: faker.number.int({ max: 5000, min: 1000 }),
      mobile: faker.number.int({ max: 5000, min: 1000 }),
      tablet: faker.number.int({ max: 5000, min: 1000 }),
    },
  ],
  [],
)

return (
  <ComposedChart.Root
    data={data}
    series={series}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

## Usage

:```tsx
import { ComposedChart } from "@yamada-ui/react"

````

```tsx
import { ComposedChart } from "@/components/ui"
````

````tsx
import { ComposedChart } from "@workspaces/ui"
```:

```tsx
<ComposedChart.Root>
  <ComposedChart.Area />
  <ComposedChart.Bar />
  <ComposedChart.Line>
    <ComposedChart.LabelList />
  </ComposedChart.Line>
  <ComposedChart.Label />
  <ComposedChart.ReferenceLine />
  <ComposedChart.Grid />
  <ComposedChart.XAxis />
  <ComposedChart.YAxis />
  <ComposedChart.Tooltip />
  <ComposedChart.Legend />
</ComposedChart.Root>
````

### Composition

```tsx
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root data={data}>
    <ComposedChart.Legend />
    <ComposedChart.Tooltip
      labelFormatter={(value) => dayjs(value).format("MMM")}
    />
    <ComposedChart.XAxis
      dataKey="date"
      tickFormatter={(value) => dayjs(value).format("MMM")}
    />
    <ComposedChart.Bar color="blue" dataKey="desktop" />
    <ComposedChart.Area color="green" dataKey="tablet" dot />
    <ComposedChart.Line color="red" dataKey="mobile" dot>
      <ComposedChart.LabelList />
    </ComposedChart.Line>
  </ComposedChart.Root>
)
```

### Change Size

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <VStack>
    <For each={["xs", "sm", "md", "lg", "xl"]}>
      {(size, index) => (
        <ComposedChart.Root
          key={index}
          size={size}
          data={data}
          series={series}
          tooltipProps={{
            labelFormatter: (value) => dayjs(value).format("MMM"),
          }}
          xAxisProps={{
            dataKey: "date",
            tickFormatter: (value) => dayjs(value).format("MMM"),
          }}
        />
      )}
    </For>
  </VStack>
)
```

### Change Color Scheme

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>(
      [
        [
          "bar",
          { dataKey: "desktop" },
        ] satisfies ComposedChart.ComposedProps<Data>,
        [
          "area",
          { dataKey: "tablet" },
        ] satisfies ComposedChart.ComposedProps<Data>,
        [
          "line",
          { dataKey: "mobile" },
        ] satisfies ComposedChart.ComposedProps<Data>,
      ],
      "blue",
    ),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    colorScheme="blue"
    data={data}
    series={series}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Change Color

```tsx
const series = useMemo<ComposedChart.ComposedProps<Data>[]>(
  () => [
    ["bar", { color: "blue", dataKey: "desktop" }],
    ["area", { color: "green", dataKey: "tablet" }],
    ["line", { color: "red", dataKey: "mobile" }],
  ],
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Add Y Axis

To add a Y axis, set `withYAxis` to `true`. The default is `false`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

To change the Y axis orientation, set `orientation` in `yAxisProps` to `"start"` or `"end"`. The default is `"start"`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{ orientation: "end" }}
  />
)
```

### Add Legend

To add a legend, set `withLegend` to `true`. The default is `false`. To change the legend placement, set `placement` in `legendProps` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`.

```tsx
const series = useMemo<ComposedChart.ComposedProps<Data>[]>(
  () => [
    ["bar", { color: "blue", dataKey: "desktop" }],
    ["area", { color: "green", dataKey: "tablet" }],
    ["line", { color: "red", dataKey: "mobile" }],
  ],
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withLegend
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Change Name

To change the name of the tooltip or legend, set `name` in `series`.

```tsx
const series = useMemo<ComposedChart.ComposedProps<Data>[]>(
  () => [
    ["bar", { name: "Desktop", color: "blue", dataKey: "desktop" }],
    ["area", { name: "Tablet", color: "green", dataKey: "tablet" }],
    ["line", { name: "Mobile", color: "red", dataKey: "mobile" }],
  ],
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withLegend
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Change Grid

To change the grid, set `horizontal` and `vertical` to a boolean in `gridProps`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <VStack>
    <For each={["xy", "x", "y", "none"]}>
      {(value, index) => (
        <ComposedChart.Root
          key={index}
          gridProps={{
            horizontal: value.includes("x"),
            vertical: value.includes("y"),
          }}
          data={data}
          series={series}
          xAxisProps={{
            dataKey: "date",
            tickFormatter: (value) => dayjs(value).format("MMM"),
          }}
        />
      )}
    </For>
  </VStack>
)
```

### Change Line Type

To change the type, set `type` in `series` or `lineProps.type` or `areaProps.type` to `"monotone"`, `"linear"`, etc. The default is `"monotone"`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <VStack>
    <For
      each={[
        "monotone",
        "bump",
        "linear",
        "natural",
        "step",
        "stepBefore",
        "stepAfter",
      ]}
    >
      {(type, index) => (
        <ComposedChart.Root
          key={index}
          data={data}
          series={series}
          areaProps={{ type }}
          lineProps={{ type }}
          tooltipProps={{
            labelFormatter: (value) => dayjs(value).format("MMM"),
          }}
          xAxisProps={{
            dataKey: "date",
            tickFormatter: (value) => dayjs(value).format("MMM"),
          }}
        />
      )}
    </For>
  </VStack>
)
```

### Add Line Dot

To add a dot to the line, set `dot` in `series` or `lineProps.dot` or `areaProps.dot` to `true`. The default is `false`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    areaProps={{ dot: true }}
    lineProps={{ dot: true }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Range Bar

To add a range bar, set the value to an `[min, max]` array in the data item.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(
  () =>
    Array.from({ length: 6 }, (_, index) => ({
      date: dayjs().add(index, "month").format("YYYY-MM-DD"),
      desktop: [
        faker.number.int({ min: 1000, max: 2000 }),
        faker.number.int({ min: 4000, max: 5000 }),
      ],
      mobile: faker.number.int({ min: 1000, max: 5000 }),
      tablet: faker.number.int({ min: 1000, max: 5000 }),
    })),
  [],
)

return (
  <ComposedChart.Root
    data={data}
    series={series}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Stacked Bar

To stack the bars, set `stackId` in `series` or `barProps.stackId` to a string.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      ["bar", { dataKey: "desktop", radius: [0, 0, 4, 4] }],
      ["bar", { dataKey: "tablet", radius: [4, 4, 0, 0] }],
      ["line", { dataKey: "mobile" }],
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    barProps={{ stackId: "stack" }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Change Bar Size

To change the bar size, set `barSize` in `series` or `barProps.barSize` to a number. The default is `40`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    barProps={{ barSize: 50 }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Change Bar Radius

To change the bar radius, set `radius` in `series` or `barProps.radius` to a number or an array.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    barProps={{ radius: 8 }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Change Bar Gap

To change the bar gap, set `barGap` in `chartProps` and `barSize` in `barProps` to a number or string.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      ["bar", { dataKey: "desktop" }],
      ["bar", { dataKey: "tablet" }],
      ["line", { dataKey: "mobile" }],
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    chartProps={{ barGap: 16 }}
    barProps={{ barSize: 20 }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Show Label

To show the label, set `label` in `series` or `lineProps.label` or `areaProps.label` or `barProps.label` to `true`. The default is `false`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    lineProps={{ dot: true, label: true }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{ domain: [0, 10000], ticks: [0, 2500, 5000, 7500, 10000] }}
  />
)
```

### Add Unit

To add a unit, use `formatter` or `tickFormatter` or set `unit` to a string.

```tsx preview functional
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    lineProps={{
      dot: true,
      label: { formatter: (value) => `${(Number(value) / 1000).toFixed(1)}k` },
    }}
    tooltipProps={{
      formatter: (value) => `${(Number(value) / 1000).toFixed(1)}k`,
      labelFormatter: (value) => dayjs(value).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{
      domain: [0, 10000],
      tickFormatter: (value) => (value / 1000).toFixed(1),
      ticks: [0, 2500, 5000, 7500, 10000],
      unit: "k",
    }}
  />
)
```

### Sync

To sync the charts, set `syncId` to a string.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <VStack>
    <ComposedChart.Root
      data={data}
      series={series}
      syncId="chart"
      tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
      xAxisProps={{
        dataKey: "date",
        tickFormatter: (value) => dayjs(value).format("MMM"),
      }}
    />
    <ComposedChart.Root
      data={data}
      series={series}
      syncId="chart"
      tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
      xAxisProps={{
        dataKey: "date",
        tickFormatter: (value) => dayjs(value).format("MMM"),
      }}
    />
  </VStack>
)
```

### Format

To format the chart, use `formatter` or `tickFormatter` etc.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    tooltipProps={{
      formatter: (value, name = "") => [
        Number(value).toLocaleString(),
        toTitleCase(name),
      ],
      labelFormatter: (value) => dayjs(value).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{ tickFormatter: (value) => value.toLocaleString() }}
  />
)
```

### Add Reference Line

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  >
    <ComposedChart.ReferenceLine label="Reference line" y={3000} />
    <ComposedChart.ReferenceLine
      label={{ position: "insideTopLeft", value: "Reference line" }}
      x={dayjs().add(3, "month").format("YYYY-MM-DD")}
    />
    <ComposedChart.ReferenceLine
      label={{ position: "center", value: "Reference line" }}
      segment={[
        { x: dayjs().format("YYYY-MM-DD"), y: 0 },
        { x: dayjs().add(3, "month").format("YYYY-MM-DD"), y: 3000 },
      ]}
    />
  </ComposedChart.Root>
)
```

### Add Tick Line

To add a tick line to the axis, set `tickLine` in `xAxisProps` or `yAxisProps` to `true`. The default is `false`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
      tickLine: true,
    }}
    yAxisProps={{ tickLine: true }}
  />
)
```

### Add Axis Label

To add a label to the axis, set `label` in `xAxisProps` or `yAxisProps` to a string. The default is `false`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      label: "Date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{ label: "Value" }}
  />
)
```

### Set Domain

To set the range, set `domain` to an array in `yAxisProps`. To set the interval, set `ticks` to an array in `yAxisProps`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withYAxis
    chartProps={{ margin: { right: 16 } }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{ domain: [0, 5000], ticks: [0, 1000, 2000, 3000, 4000, 5000] }}
  />
)
```

### Add Tooltip Cursor

To add a tooltip cursor, set `cursor` to `true` in `tooltipProps`. The default is `false`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    tooltipProps={{
      cursor: true,
      labelFormatter: (value) => dayjs(value).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Hide X Axis

To hide the X axis, set `withXAxis` to `false`. The default is `true`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withXAxis={false}
    chartProps={{ margin: { left: 0, right: 0 } }}
    tooltipProps={{ labelFormatter: () => null }}
  />
)
```

### Hide Active Dot

To hide the active dot, set `activeDot` in `series` or `lineProps.activeDot` or `areaProps.activeDot` to `false`. The default is `true`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    areaProps={{ activeDot: false }}
    lineProps={{ activeDot: false }}
    tooltipProps={{ labelFormatter: (value) => dayjs(value).format("MMM") }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

### Hide Tooltip

To hide the tooltip, set `withTooltip` to `false`. The default is `true`.

```tsx
const series = useMemo(
  () =>
    ComposedChart.mergeSeries<Data>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<Data>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<Data>,
    ]),
  [],
)
const data = useMemo(() => createCartesianChartData(), [])

return (
  <ComposedChart.Root
    data={data}
    series={series}
    withTooltip={false}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)
```

## Props

<PropsTable
  name="chart"
  pick={[
    "ComposedChart",
    "ComposedChart.Root",
    "ComposedChart.Area",
    "ComposedChart.Bar",
    "ComposedChart.Grid",
    "ComposedChart.Label",
    "ComposedChart.LabelList",
    "ComposedChart.Legend",
    "ComposedChart.Line",
    "ComposedChart.ReferenceLine",
    "ComposedChart.Tooltip",
    "ComposedChart.XAxis",
    "ComposedChart.YAxis",
  ]}
/>