Line Chart · Kind UI charts

Loading chart…

Visitors
Month	Visitors
Jan	420
Feb	580
Mar	510
Apr	760
May	680
Jun	910
Jul	840
Aug	1070
Sep	960
Oct	1180
Nov	1110
Dec	1360

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", visitors: 420 },
  { period: "Feb", visitors: 580 },
  { period: "Mar", visitors: 510 },
  { period: "Apr", visitors: 760 },
  { period: "May", visitors: 680 },
  { period: "Jun", visitors: 910 },
  { period: "Jul", visitors: 840 },
  { period: "Aug", visitors: 1070 },
  { period: "Sep", visitors: 960 },
  { period: "Oct", visitors: 1180 },
  { period: "Nov", visitors: 1110 },
  { period: "Dec", visitors: 1360 },
];
const config = {
  visitors: { label: "Visitors", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function VisitorTrendChart() {
  return (
    <Chart.LineChart
      data={data}
      config={config}
      legend={{}}
      margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
      aria-label="Monthly visitors"
    >
      <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
      <Chart.XAxis
        dataKey="period"
        axisLine={false}
        tickLine={false}
        tickMargin={12}
        height={48}
        interval="preserveStartEnd"
      />
      <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
      <Chart.LineSeries dataKey="visitors" type="monotone" strokeWidth={2} dot={{ r: 2.5 }} />
      <Chart.Tooltip />
    </Chart.LineChart>
  );
}

Usage

Pass data and config to LineChart. Customize its defaults or compose plot parts as children.

legend={{}} enables the internally positioned Chart.Legend; LineChart owns its context and placement.

Imports

import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

Composition

<Chart.LineChart data={data} config={config} legend={{}} aria-label="Monthly visitors">
  <Chart.CartesianGrid vertical={false} />
  <Chart.XAxis dataKey="period" />
  <Chart.YAxis />
  <Chart.LineSeries dataKey="visitors" type="monotone" />
  <Chart.Tooltip />
</Chart.LineChart>

The grid guides comparison, axes label the scale, LineSeries draws the values, and Tooltip shows the inspected point. Omit explicit children and pass xDataKey="period" to use generated parts.

Curve types

Choose smooth, linear or step-after interpolation. The code follows the selected curve.

Loading chart…

Visitors
Month	Visitors
Jan	420
Feb	580
Mar	510
Apr	760
May	680
Jun	910
Jul	840
Aug	1070
Sep	960
Oct	1180
Nov	1110
Dec	1360

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", visitors: 420 },
  { period: "Feb", visitors: 580 },
  { period: "Mar", visitors: 510 },
  { period: "Apr", visitors: 760 },
  { period: "May", visitors: 680 },
  { period: "Jun", visitors: 910 },
  { period: "Jul", visitors: 840 },
  { period: "Aug", visitors: 1070 },
  { period: "Sep", visitors: 960 },
  { period: "Oct", visitors: 1180 },
  { period: "Nov", visitors: 1110 },
  { period: "Dec", visitors: 1360 },
];
const config = {
  visitors: { label: "Visitors", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function VisitorCurveChart({
  curve = "monotone",
}: {
  curve?: "monotone" | "linear" | "stepAfter";
} = {}) {
  return (
    <Chart.LineChart
      data={data}
      config={config}
      legend={{}}
      margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
      aria-label="Monthly visitors"
    >
      <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
      <Chart.XAxis
        dataKey="period"
        axisLine={false}
        tickLine={false}
        tickMargin={12}
        height={48}
        interval="preserveStartEnd"
      />
      <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
      <Chart.LineSeries dataKey="visitors" type={curve} strokeWidth={2} dot={{ r: 2.5 }} />
      <Chart.Tooltip />
    </Chart.LineChart>
  );
}

Multiple series

Compare revenue with a dashed target. Use the legend to hide either series.

Loading chart…

Revenue and target ($ thousands)
Month	Revenue ($k)	Target ($k)
Jan	42	48
Feb	58	54
Mar	51	60
Apr	76	66
May	68	72
Jun	91	78
Jul	84	84
Aug	107	90
Sep	96	96
Oct	118	102
Nov	111	108
Dec	136	114

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", actual: 42, target: 48 },
  { period: "Feb", actual: 58, target: 54 },
  { period: "Mar", actual: 51, target: 60 },
  { period: "Apr", actual: 76, target: 66 },
  { period: "May", actual: 68, target: 72 },
  { period: "Jun", actual: 91, target: 78 },
  { period: "Jul", actual: 84, target: 84 },
  { period: "Aug", actual: 107, target: 90 },
  { period: "Sep", actual: 96, target: 96 },
  { period: "Oct", actual: 118, target: 102 },
  { period: "Nov", actual: 111, target: 108 },
  { period: "Dec", actual: 136, target: 114 },
];
const config = {
  actual: { label: "Revenue", color: "#733bff", formatValue: (value: unknown) => `$${value}k` },
  target: { label: "Target", color: "#119548", formatValue: (value: unknown) => `$${value}k` },
} satisfies Chart.SeriesConfig;

export function RevenueComparisonChart() {
  return (
    <Chart.LineChart
      data={data}
      config={config}
      xDataKey="period"
      xAxis={{ tickMargin: 12, height: 48, interval: "preserveStartEnd" }}
      margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
      aria-label="Revenue and target in thousands of dollars"
      yAxis={{ tickMargin: 12, width: 104, tickFormatter: (value) => `$${value}k` }}
      series={[
        { seriesKey: "actual", dataKey: "actual" },
        { seriesKey: "target", dataKey: "target", type: "linear", strokeDasharray: "5 5" },
      ]}
    />
  );
}

Dots and labels

Explicit children add diamond markers and labels. LineChart still owns sizing, visibility and motion.

Loading chart…

Response time (milliseconds)
Day	Response time (ms)
Mon	140
Tue	128
Wed	156
Thu	119
Fri	134
Sat	108
Sun	121

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Mon", response: 140 },
  { period: "Tue", response: 128 },
  { period: "Wed", response: 156 },
  { period: "Thu", response: 119 },
  { period: "Fri", response: 134 },
  { period: "Sat", response: 108 },
  { period: "Sun", response: 121 },
];
const config = {
  response: {
    label: "Response time",
    color: "#733bff",
    formatValue: (value: unknown) => `${value} ms`,
  },
} satisfies Chart.SeriesConfig;

function Diamond({ cx, cy }: Pick<Chart.DotProps, "cx" | "cy">) {
  if (cx == null || cy == null) return <g />;
  return (
    <path
      d={`M ${cx} ${cy - 4} l 4 4 -4 4 -4 -4 Z`}
      fill="var(--kind-ui-chart-background, #fff)"
      stroke="var(--color-response)"
      strokeWidth={1.5}
    />
  );
}
export function ResponseTimeChart() {
  return (
    <Chart.LineChart
      data={data}
      config={config}
      aria-label="Response time in milliseconds"
      legend={{}}
      margin={{ top: 36, right: 28, left: 0, bottom: 12 }}
    >
      <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
      <Chart.XAxis height={48} dataKey="period" axisLine={false} tickLine={false} tickMargin={12} />
      <Chart.YAxis domain={[0, 200]} axisLine={false} tickLine={false} tickMargin={12} width={88} />
      <Chart.LineSeries dataKey="response" strokeWidth={2.5} dot={<Diamond />}>
        <Chart.LabelList
          dataKey="response"
          position="top"
          offset={14}
          fill="var(--kind-ui-chart-foreground, #111827)"
          fontSize={12}
        />
      </Chart.LineSeries>
      <Chart.Tooltip />
    </Chart.LineChart>
  );
}

Materials

Choose plain, paper, clay or glow.

Loading chart…

Visitors
Month	Visitors
Jan	420
Feb	580
Mar	510
Apr	760
May	680
Jun	910
Jul	840
Aug	1070
Sep	960
Oct	1180
Nov	1110
Dec	1360

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Jan", visitors: 420 },
  { period: "Feb", visitors: 580 },
  { period: "Mar", visitors: 510 },
  { period: "Apr", visitors: 760 },
  { period: "May", visitors: 680 },
  { period: "Jun", visitors: 910 },
  { period: "Jul", visitors: 840 },
  { period: "Aug", visitors: 1070 },
  { period: "Sep", visitors: 960 },
  { period: "Oct", visitors: 1180 },
  { period: "Nov", visitors: 1110 },
  { period: "Dec", visitors: 1360 },
];
const config = {
  visitors: { label: "Visitors", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function MaterialLineChart({
  material = "paper",
}: {
  material?: "plain" | "paper" | "clay" | "glow";
} = {}) {
  return (
    <Chart.LineChart
      data={data}
      config={config}
      legend={{}}
      margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
      aria-label="Monthly visitors"
    >
      <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
      <Chart.XAxis
        dataKey="period"
        axisLine={false}
        tickLine={false}
        tickMargin={12}
        height={48}
        interval="preserveStartEnd"
      />
      <Chart.YAxis axisLine={false} tickLine={false} tickMargin={12} width={88} />
      <Chart.LineSeries
        dataKey="visitors"
        type="monotone"
        material={material}
        strokeWidth={2}
        dot={{ r: 2.5 }}
      />
      <Chart.Tooltip />
    </Chart.LineChart>
  );
}

API reference

Passing config enables the defaults below. Omit config for the existing Root + LineChart composition.

LineChart

Configured LineChart owns its Root; do not wrap it in another one. Each config key generates a series unless you provide series or explicit children.

Prop	Type	Default	Description
`data`	`readonly Row[]`	Required	Observations to plot.
`config`	`SeriesConfig`	Required in configured mode	Series labels, colors and optional value formatters.
`xDataKey`	`DataKey<Row>`	Required with generated parts	Field or accessor for x-axis labels. Omit with explicit children.
`aria-label` / `aria-labelledby`	`string`	One required	Accessible chart name. Keyboard inspection instructions are provided.
`height` / `width`	Native chart dimensions	`280px` / `100%`	Responsive plot dimensions; `style` and `className` can also override sizing.
`curve`	Recharts curve type	`"monotone"`	Curve for generated series; use `"linear"` or `"stepAfter"` here.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Finish for generated series, including `"paper"`.
`series`	`ConfiguredLineSeries<Row>[]`	Config keys	Per-series props; each entry needs `dataKey` and a unique `seriesKey` in config.
`xAxis` / `yAxis` / `grid`	Native props or `false`	Styled axes and horizontal grid	Override generated parts or hide them.
`tooltip` / `legend`	Kind props or `false`	Enabled with generated parts	Override or hide the tooltip and legend. Explicit children need `legend={{}}` to add a legend.
`animate`	`boolean` or `LineAnimation`	`true` configured; `false` legacy	Entrance and emphasis motion; respects reduced motion.
`defaultVisibleSeries`	`readonly string[]`	All series	Initial uncontrolled selection. Legend toggles update it automatically.
`visibleSeries` / `onVisibleSeriesChange`	`readonly string[]` / callback	Uncontrolled	Provide both for controlled toggles. Without a callback, controlled visibility is read-only.
`children`	`ReactNode`	Generated parts	Explicit children replace the plot parts, including `null` or an empty fragment.

With explicit children, omit xDataKey, curve, material, series and generated-part options. Keep visibility mode stable or remount to change it. See Recharts LineChart for native plot props.

Use LineSeries inside explicit children, or pass its props in the configured series array. String dataKey values identify their config entry; seriesKey supplies a separate identity for accessor or numeric keys.

Prop	Type	Default	Description
`dataKey`	`DataKey<Row>`	Required	Value field or accessor.
`seriesKey`	`string`	String `dataKey`	Config and visibility identity; required in a `series` array.
`type`	Recharts curve type	`"linear"` explicit; `"monotone"` generated	Curve for this line.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Line finish; custom `shape` or `filter` takes precedence.
`dot`	Native dot props or renderer	`true` explicit; radius `2.5` generated	Point markers; use `false` to hide them.
`strokeWidth` / `strokeDasharray`	`number` / `string`	Width `1` explicit / `2` generated; no dashes	Stroke weight and dash pattern.

Missing values remain gaps unless connectNulls is enabled. See Recharts Line for native marks and material support for finishes.

Shared components

Root, SeriesConfig, Legend, Tooltip, Axes and grid, ResponsiveContainer, Labels and cells.

Month	Revenue ($k)	Target ($k)
Jan	42	48
Feb	58	54
Mar	51	60
Apr	76	66
May	68	72
Jun	91	78
Jul	84	84
Aug	107	90
Sep	96	96
Oct	118	102
Nov	111	108
Dec	136	114

Month	Revenue ($k)	Target ($k)
Jan	42	48
Feb	58	54
Mar	51	60
Apr	76	66
May	68	72
Jun	91	78
Jul	84	84
Aug	107	90
Sep	96	96
Oct	118	102
Nov	111	108
Dec	136	114

UsageCopy Anchor Link

Curve typesCopy Anchor Link

Multiple seriesCopy Anchor Link

Dots and labelsCopy Anchor Link

MaterialsCopy Anchor Link

API referenceCopy Anchor Link

LineChartCopy Anchor Link

LineSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Curve types

Multiple series

Dots and labels

Materials

API reference

LineChart

LineSeries

Shared components

Month	Revenue ($k)	Target ($k)
Jan	42	48
Feb	58	54
Mar	51	60
Apr	76	66
May	68	72
Jun	91	78
Jul	84	84
Aug	107	90
Sep	96	96
Oct	118	102
Nov	111	108
Dec	136	114