LineChart

LineChart is a component for drawing line charts to compare multiple sets of data.

Import

pnpm add @yamada-ui/charts

Copied!

@yamada-ui/charts is not included in @yamada-ui/react, so it needs to be installed separately.

import { LineChart } from "@yamada-ui/charts"

Copied!

Usage

LineChart internally uses Recharts.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return <LineChart data={data} series={series} dataKey="name" />

Copied!

Change Size

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart data={data} series={series} dataKey="name" size="sm" />
    <LineChart data={data} series={series} dataKey="name" size="md" />
    <LineChart data={data} series={series} dataKey="name" size="lg" />
    <LineChart data={data} series={series} dataKey="name" size="full" />
  </VStack>
)

Copied!

Change Curve

To change the curve, set curveType to "monotone", "bump", etc. The default is "monotone".

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart
      data={data}
      series={series}
      dataKey="name"
      curveType="monotone"
    />
    <LineChart data={data} series={series} dataKey="name" curveType="bump" />
    <LineChart data={data} series={series} dataKey="name" curveType="linear" />
    <LineChart data={data} series={series} dataKey="name" curveType="natural" />
    <LineChart data={data} series={series} dataKey="name" curveType="step" />
    <LineChart
      data={data}
      series={series}
      dataKey="name"
      curveType="stepBefore"
    />
    <LineChart
      data={data}
      series={series}
      dataKey="name"
      curveType="stepAfter"
    />
  </VStack>
)

Copied!

Change Direction

To change the direction, set layoutType to "horizontal" or "vertical". The default is "horizontal".

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <LineChart data={data} series={series} dataKey="name" layoutType="vertical" />
)

Copied!

Display Legend

To display the legend, set withLegend to true. To change the position of the legend, set legendProps.verticalAlign to "bottom" or similar.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart data={data} series={series} dataKey="name" withLegend />

    <LineChart
      data={data}
      series={series}
      dataKey="name"
      withLegend
      legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }}
    />
  </VStack>
)

Copied!

Display Label

To display label, set xAxisLabel or yAxisLabel with a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <LineChart
    data={data}
    series={series}
    dataKey="name"
    xAxisLabel="ポケモン"
    yAxisLabel="ステータス"
  />
)

Copied!

Display Reference Line

To display a reference line, set referenceLineProps with props.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <LineChart
    data={data}
    series={series}
    dataKey="name"
    referenceLineProps={[{ y: 30, label: "Avg.", color: "red.500" }]}
  />
)

Copied!

Hide Dots

To hide dots, set withDots or withActiveDots to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <LineChart
    data={data}
    series={series}
    dataKey="name"
    withDots={false}
    withActiveDots={false}
  />
)

Copied!

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

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <LineChart data={data} series={series} dataKey="name" withTooltip={false} />
)

Copied!

Hide Axis

To hide the axis, set withYAxis or withXAxis to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart data={data} series={series} dataKey="name" withYAxis={false} />
    <LineChart data={data} series={series} dataKey="name" withXAxis={false} />
  </VStack>
)

Copied!

Change Grid Layout

To change the grid layout, set gridAxis to "x", "y", "xy", or "none".

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart data={data} series={series} dataKey="name" gridAxis="x" />
    <LineChart data={data} series={series} dataKey="name" gridAxis="y" />
    <LineChart data={data} series={series} dataKey="name" gridAxis="xy" />
    <LineChart data={data} series={series} dataKey="name" gridAxis="none" />
  </VStack>
)

Copied!

Mark Ticks

To mark ticks, set tickLine to "x", "y", "xy", or "none".

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart data={data} series={series} dataKey="name" tickLine="x" />
    <LineChart data={data} series={series} dataKey="name" tickLine="y" />
    <LineChart data={data} series={series} dataKey="name" tickLine="xy" />
    <LineChart data={data} series={series} dataKey="name" tickLine="none" />
  </VStack>
)

Copied!

Synchronize

To synchronize the behavior of the charts, set a common string for syncId of each chart.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart data={data} series={series} dataKey="name" syncId="syncId" />
    <LineChart data={data} series={series} dataKey="name" syncId="syncId" />
  </VStack>
)

Copied!

Add Unit

To add a unit, set unit with a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return <LineChart data={data} series={series} dataKey="name" unit="P" />

Copied!

Format

To format tooltip labels, use labelFormatter, and to format values, use valueFormatter.
To format axis labels, use xAxisTickFormatter or yAxisTickFormatter.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <LineChart
      data={data}
      series={series}
      dataKey="name"
      labelFormatter={(value) => `ポケモン: ${value}`}
      valueFormatter={(value) => `${value}P`}
    />
    <LineChart
      data={data}
      series={series}
      dataKey="name"
      xAxisTickFormatter={(value) => `ポケモン: ${value}`}
      yAxisTickFormatter={(value) => `${value}P`}
    />
  </VStack>
)

Copied!

Adjust Opacity

To adjust opacity, set fillOpacity with a number or an array of numbers.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <LineChart
    data={data}
    series={series}
    dataKey="name"
    fillOpacity={[0.8, 0.7]}
  />
)

Copied!

Adjust Dashed Line

To adjust the dashed line, set strokeDasharray with a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "ヤドン",
      HP: 90,
      こうげき: 65,
      ぼうぎょ: 65,
      とくこう: 40,
      とくぼう: 40,
      すばやさ: 15,
    },
    {
      name: "コダック",
      HP: 50,
      こうげき: 52,
      ぼうぎょ: 48,
      とくこう: 65,
      とくぼう: 50,
      すばやさ: 55,
    },
    {
      name: "カビゴン",
      HP: 160,
      こうげき: 110,
      ぼうぎょ: 65,
      とくこう: 65,
      とくぼう: 110,
      すばやさ: 30,
    },
  ],
  [],
)

const series: LineProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500", strokeDasharray: "15 15" },
    { dataKey: "こうげき", color: "red.500", strokeDasharray: "15 15" },
    { dataKey: "ぼうぎょ", color: "blue.500", strokeDasharray: "15 15" },
    { dataKey: "とくこう", color: "purple.500", strokeDasharray: "15 15" },
    { dataKey: "とくぼう", color: "orange.500", strokeDasharray: "15 15" },
    { dataKey: "すばやさ", color: "cyan.500", strokeDasharray: "15 15" },
  ],
  [],
)

return <LineChart data={data} series={series} dataKey="name" />

Copied!

Edit this page on GitHub

PreviousKbd NextList

LineChart

Usage

Change Size

Change Curve

Change Direction

Display Legend

Display Label

Display Reference Line

Hide Dots

Hide Tooltip

Hide Axis

Change Grid Layout

Mark Ticks

Synchronize

Add Unit

Format

Adjust Opacity

Adjust Dashed Line