ComposedChart

ComposedChartは、複数のデータを比較するための複合チャートを描画するコンポーネントです。

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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)

使い方

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

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

import { ComposedChart } from "@workspaces/ui"

<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>

コンポジション

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

return (
  <ComposedChart.Root data={data}>
    <ComposedChart.Legend />
    <ComposedChart.Tooltip
      labelFormatter={(value) => dayjs(value as string).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>
)

サイズを変更する

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
    ]),
  [],
)
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 as string).format("MMM"),
          }}
          xAxisProps={{
            dataKey: "date",
            tickFormatter: (value) => dayjs(value).format("MMM"),
          }}
        />
      )}
    </For>
  </VStack>
)

カラースキームを変更する

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

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

色を変更する

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

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

Y軸を表示する

Y軸を表示する場合は、withYAxisをtrueに設定します。デフォルトは、falseです。

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

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

また、yAxisProps.orientationに"start"や"end"を設定することで、Y軸の配置を変更できます。デフォルトは、"start"です。

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

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

凡例を表示する

凡例を表示する場合は、withLegendをtrueに設定します。デフォルトは、falseです。また、凡例の配置を変更する場合は、legendProps.placementに"start-start"や"end-end"などを設定します。デフォルトは、"start-end"です。

const series = useMemo<ComposedChart.ComposedProps<CartesianChartData>[]>(
  () => [
    ["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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)

項目名を変更する

ツールチップや凡例の項目名を変更する場合は、seriesのnameに文字列を設定します。

const series = useMemo<ComposedChart.ComposedProps<CartesianChartData>[]>(
  () => [
    ["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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)

グリッドを変更する

グリッドを変更する場合は、gridProps.horizontalとgridProps.verticalに真偽値を設定します。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
    ]),
  [],
)
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>
)

線のタイプを変更する

線のタイプを変更する場合は、seriesのtypeまたはlineProps.typeまたはareaProps.typeに"monotone"や"linear"などを設定します。デフォルトは、"monotone"です。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
    ]),
  [],
)
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 as string).format("MMM"),
          }}
          xAxisProps={{
            dataKey: "date",
            tickFormatter: (value) => dayjs(value).format("MMM"),
          }}
        />
      )}
    </For>
  </VStack>
)

線のドットを表示する

線のドットを表示する場合は、seriesのdotまたはlineProps.dotまたはareaProps.dotをtrueに設定します。デフォルトは、falseです。

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

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

棒を範囲にする

棒を範囲にする場合は、dataの項目の値を[最小, 最大]の配列に設定します。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
    ]),
  [],
)
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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)

棒を積み上げる

棒を積み上げる場合は、seriesのstackIdまたはbarProps.stackIdに文字列を設定します。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      ["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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)

バーのサイズを変更する

バーのサイズを変更する場合は、seriesのbarSizeまたはbarProps.barSizeに数値を設定します。デフォルトは、40です。

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

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

棒の角丸を変更する

棒の角丸を変更する場合は、seriesのradiusまたはbarProps.radiusに数値または配列を設定します。

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

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

棒の間隔を変更する

棒の間隔を変更する場合は、chartProps.barCategoryGapとchartProps.barGapに文字列または数値を設定します。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      ["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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
  />
)

ラベルを表示する

ラベルを表示する場合は、seriesのlabelまたはlineProps.labelまたはareaProps.labelまたはbarProps.labelをtrueに設定します。デフォルトは、falseです。

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

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

単位を表示する

単位を表示する場合は、formatterやtickFormatterを使用するか、unitに文字列を設定します。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
    ]),
  [],
)
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 as string).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",
    }}
  />
)

同期させる

同期させる場合は、syncIdに文字列を設定します。

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

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

フォーマットする

フォーマットする場合は、formatterやtickFormatterなどを使用します。

const series = useMemo(
  () =>
    ComposedChart.mergeSeries<CartesianChartData>([
      [
        "bar",
        { dataKey: "desktop" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "area",
        { dataKey: "tablet" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
      [
        "line",
        { dataKey: "mobile" },
      ] satisfies ComposedChart.ComposedProps<CartesianChartData>,
    ]),
  [],
)
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 as string).format("MMM"),
    }}
    xAxisProps={{
      dataKey: "date",
      tickFormatter: (value) => dayjs(value).format("MMM"),
    }}
    yAxisProps={{ tickFormatter: (value) => value.toLocaleString() }}
  />
)

基準線を表示する

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

return (
  <ComposedChart.Root
    data={data}
    series={series}
    tooltipProps={{
      labelFormatter: (value) => dayjs(value as string).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>
)

目盛線を表示する

目盛線を表示する場合は、xAxisProps.tickLineまたはyAxisProps.tickLineをtrueに設定します。デフォルトは、falseです。

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

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

軸のラベルを表示する

軸のラベルを表示する場合は、xAxisProps.labelまたはyAxisProps.labelに文字列を設定します。デフォルトは、falseです。

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

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

範囲を設定する

範囲を設定する場合は、yAxisProps.domainに[最小, 最大]を設定します。間隔を設定する場合は、yAxisProps.ticksに配列を設定します。

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

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

ツールチップのカーソルを表示する場合は、tooltipProps.cursorをtrueに設定します。デフォルトは、falseです。

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

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

X軸を非表示にする

X軸を非表示にする場合は、withXAxisをfalseに設定します。デフォルトは、trueです。

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

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

アクティブドットを非表示にする

アクティブドットを非表示にする場合は、seriesのactiveDotまたはlineProps.activeDotまたはareaProps.activeDotをfalseに設定します。デフォルトは、trueです。

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

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

ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。

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

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

アクセシビリティ

キー	説明	状態
`ArrowRight`	次のデータポイントに移動し、ツールチップを表示します。	`withTooltip={true}`
`ArrowLeft`	前のデータポイントに移動し、ツールチップを表示します。	`withTooltip={true}`
`Enter`	アクティブなデータポイントのツールチップの表示を切り替えます。	`withTooltip={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`svg`	`role="application"`	アプリケーションであることを示します。

Props

ComposedChart.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`activeDotFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the active dots.
`activeDotRadius`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| 0 \| AnyString ...` The radius of the active dots.
`activeDotStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the active dots.
`activeDotStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the active dots.
`areaEndFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The fill opacity of the area end.
`areaFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The fill opacity of the area.
`areaProps`	-	`Omit<ChartAreaProps<Dict<any>>, "data" \| "dataKey">` Props for the area component.
`areaStartFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The fill opacity of the area start.
`barColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the bars.
`barFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the bars.
`barFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The fill opacity of the bars.
`barProps`	-	`Omit<ChartBarProps<Dict<any>>, "dataKey">` Props for the bar component.
`barStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the bars.
`barStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the bars.
`chartProps`	-	`Omit<CartesianChartProps<unknown>, "data">` Props for the line chart component.
`data`	-	`Y[]` Chart data.
`dotFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the dots.
`dotRadius`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| 0 \| AnyString ...` The radius of the dots.
`dotStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the dots.
`dotStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the dots.
`gridProps`	-	`ChartGridProps` Props for the grid component.
`gridStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the grid.
`inactiveBarOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The opacity of the inactive bars.
`inactiveLineOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The opacity of the inactive lines.
`labelListColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the label list.
`labelListFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the label list.
`legendProps`	-	`ChartLegendProps` Props for the legend component.
`lineColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the lines.
`lineProps`	-	`Omit<ChartLineProps<Dict<any>>, "data" \| "dataKey">` Props for the line component.
`lineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the lines.
`lineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the lines.
`referenceLineColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the reference lines.
`referenceLineProps`	-	`ChartReferenceLineProps` Props for the reference line component.
`referenceLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the reference lines.
`referenceLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the reference lines.
`referenceLineTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The text color of the reference lines.
`referenceLineTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The text fill color of the reference lines.
`responsiveContainerProps`	-	`Props` Props for the responsive container component.
`series`	-	`ComposedProps<Y>[]` If provided, generate lines based on series.
`tooltipCursorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the tooltip cursor.
`tooltipCursorFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...` The fill opacity of the tooltip cursor.
`tooltipCursorStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the tooltip cursor.
`tooltipProps`	-	`ChartTooltipProps<number, string>` Props for the tooltip component.
`withGrid`	`true`	`boolean` If `true`, grid is visible.
`withLegend`	`false`	`boolean` If `true`, legend is visible.
`withTooltip`	`true`	`boolean` If `true`, tooltip is visible.
`withXAxis`	`true`	`boolean` If `true`, X axis is visible.
`withYAxis`	`false`	`boolean` If `true`, Y axis is visible.
`xAxisLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the x-axis lines.
`xAxisLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the x-axis lines.
`xAxisProps`	-	`ChartXAxisProps` Props for the x axis component.
`xAxisTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The text color of the x-axis.
`xAxisTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The text fill color of the x-axis.
`yAxisLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the y-axis lines.
`yAxisLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number \| number & {} ...` The stroke width of the y-axis lines.
`yAxisProps`	-	`ChartYAxisProps` Props for the y axis component.
`yAxisTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The text color of the y-axis.
`yAxisTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The text fill color of the y-axis.

ComposedChart.Area

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`dataKey`	-	`keyof Y` The key of a group of data which should be unique in an chart.
`activeDot`	`true`	`ChartActiveDot` The active dot to use for the line.
`data`	-	`Y[]` The data to use for the area.
`dot`	`false`	`ChartDot` The dot to use for the line.
`gradient`	-	`ChartAreaGradient` The gradient to use for the area.
`label`	`false`	`ChartLabelList` The label list to use for the line.
`withGradient`	-	`boolean` Determines whether the chart area should be represented with a gradient instead of the solid color.

ComposedChart.Bar

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`dataKey`	-	`keyof Y` The key of a group of data which should be unique in an chart.
`label`	`false`	`ChartLabelList` The label list to use for the bar.

ComposedChart.Grid

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ComposedChart.Label

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ComposedChart.LabelList

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ComposedChart.Legend

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`contentProps`	-	`Omit<ChartLegendContentProps, "formatter" \| "payload">` Props for the content component.
`placement`	`"start-end"`	`Direction` The placement of the legend.

ComposedChart.Line

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`dataKey`	-	`keyof Y` The key of a group of data which should be unique in an chart.
`activeDot`	`true`	`ChartActiveDot` The active dot to use for the line.
`data`	-	`Y[]` The data to use for the line.
`dot`	`false`	`ChartDot` The dot to use for the line.
`label`	`false`	`ChartLabelList` The label list to use for the line.

ComposedChart.ReferenceLine

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`label`	`false`	`ChartLabel` The label to use for the reference line.

ComposedChart.Tooltip

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`contentProps`	-	`Omit< ChartTooltipContentProps, "formatter" \| "label" \| "labelFormatter" \| "payload" >` Props for the content component.
`cursor`	-	`boolean \| ChartTooltipCursorProps \| ReactElement` Props for the cursor component.

ComposedChart.XAxis

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`label`	`false`	`ChartLabel` The label to use for the axis.
`tick`	`true`	`ChartXAxisTick` The tick to use for the axis.
`tickLine`	`false`	`ChartTickLine` The tick line to use for the axis.

ComposedChart.YAxis

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`label`	`false`	`ChartLabel` The label to use for the axis.
`orientation`	-	`SimpleDirection` The orientation of axis.
`tick`	`true`	`ChartYAxisTick` The tick to use for the axis.
`tickLine`	`false`	`ChartTickLine` The tick line to use for the axis.