LineChart

LineChart renders one ordered series. Its x scale is inferred from numeric, date, or categorical x values.

import { LineChart } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function LineChartExample() {
  return (
    <LineChart
      aria-label="Aster Labs intraday price"
      data={asterLabsPriceSeries}
      yDomain="data"
    />
  );
}

data and aria-label are required. Provide a label when the tooltip needs a more specific observation name. size controls the title size; axis labels render one Density size step smaller. emphasis controls their color.

Animate

Set animate to progressively draw the line from start to end when it mounts. It defaults to false and respects reduced-motion preferences.

import { Button, LineChart, View } from "density-base-ui";
import { RefreshCw } from "lucide-react";
import { useState } from "react";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function LineChartAnimateExample() {
  const [animationKey, setAnimationKey] = useState(0);

  return (
    <View>
      <LineChart
        key={animationKey}
        animate
        aria-label="Animated Aster Labs intraday price"
        data={asterLabsPriceSeries}
        yDomain="data"
      />
      <Button onClick={() => setAnimationKey((key) => key + 1)}>
        <RefreshCw aria-hidden="true" size={14} />
        Replay animation
      </Button>
    </View>
  );
}

Spark

Set spark for a compact 32px chart without axes, gridlines, or visible labels. Spark charts still expose their data through keyboard-accessible tooltips.

import { LineChart, View } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function LineChartSparkExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <LineChart
        aria-label="Aster Labs intraday price trend"
        color="positive"
        data={asterLabsPriceSeries}
        spark
        style={{ width: "160px" }}
      />
    </View>
  );
}

Y-axis domain

Set yDomain="data" to zoom the y-axis to the observed range with 5% padding on both ends. The default zero keeps the zero baseline visible.

Aster Labs price

import { LineChart } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function LineChartYDomainExample() {
  return (
    <LineChart
      aria-label="Aster Labs price zoomed to the data range"
      data={asterLabsPriceSeries}
      title="Aster Labs price"
      yDomain="data"
    />
  );
}

Color

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Chart 6

Positive

Negative

Neutral

import { LineChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";
export default function LineChartColorExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <LineChart
        aria-label="Chart 1"
        color="chart-1"
        data={data}
        height={100}
        title="Chart 1"
        yDomain="data"
      />
      <LineChart
        aria-label="Chart 2"
        color="chart-2"
        data={data}
        height={100}
        title="Chart 2"
        yDomain="data"
      />
      <LineChart
        aria-label="Chart 3"
        color="chart-3"
        data={data}
        height={100}
        title="Chart 3"
        yDomain="data"
      />
      <LineChart
        aria-label="Chart 4"
        color="chart-4"
        data={data}
        height={100}
        title="Chart 4"
        yDomain="data"
      />
      <LineChart
        aria-label="Chart 5"
        color="chart-5"
        data={data}
        height={100}
        title="Chart 5"
        yDomain="data"
      />
      <LineChart
        aria-label="Chart 6"
        color="chart-6"
        data={data}
        height={100}
        title="Chart 6"
        yDomain="data"
      />
      <LineChart
        aria-label="Positive"
        color="positive"
        data={data}
        height={100}
        title="Positive"
        yDomain="data"
      />
      <LineChart
        aria-label="Negative"
        color="negative"
        data={data}
        height={100}
        title="Negative"
        yDomain="data"
      />
      <LineChart
        aria-label="Neutral"
        color="neutral"
        data={data}
        height={100}
        title="Neutral"
        yDomain="data"
      />
    </View>
  );
}

Emphasis

Primary

Secondary

Outline

Ghost

import { LineChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";
export default function LineChartEmphasisExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <LineChart
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
        yDomain="data"
      />
      <LineChart
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
        yDomain="data"
      />
      <LineChart
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
        yDomain="data"
      />
      <LineChart
        aria-label="Ghost"
        data={data}
        emphasis="ghost-primary"
        height={120}
        title="Ghost"
        yDomain="data"
      />
    </View>
  );
}

Size

2xs

2xl

3xl

import { LineChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";
export default function LineChartSizeExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <LineChart
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
        yDomain="data"
      />
      <LineChart
        aria-label="xs"
        data={data}
        height={100}
        size="xs"
        title="xs"
        yDomain="data"
      />
      <LineChart
        aria-label="sm"
        data={data}
        height={100}
        size="sm"
        title="sm"
        yDomain="data"
      />
      <LineChart
        aria-label="md"
        data={data}
        height={100}
        size="md"
        title="md"
        yDomain="data"
      />
      <LineChart
        aria-label="lg"
        data={data}
        height={100}
        size="lg"
        title="lg"
        yDomain="data"
      />
      <LineChart
        aria-label="xl"
        data={data}
        height={100}
        size="xl"
        title="xl"
        yDomain="data"
      />
      <LineChart
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
        yDomain="data"
      />
      <LineChart
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
        yDomain="data"
      />
    </View>
  );
}

Title

Weekly visitors

Compared with the previous seven days

import { LineChart } from "density-base-ui";
import { ChartLine } from "lucide-react";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";
export default function LineChartTitleExample() {
  return (
    <LineChart
      aria-label="Weekly visitors"
      data={data}
      title="Weekly visitors"
      subtitle="Compared with the previous seven days"
      childrenStart={<ChartLine aria-hidden="true" size={16} />}
      yDomain="data"
    />
  );
}

Height

120 pixels

240 pixels

import { LineChart, View } from "density-base-ui";
import { asterLabsPriceSeries as data } from "../charts/asterLabsPriceSeries";
export default function LineChartHeightExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <LineChart
        aria-label="120 pixel chart"
        data={data}
        height={120}
        title="120 pixels"
        yDomain="data"
      />
      <LineChart
        aria-label="240 pixel chart"
        data={data}
        height={240}
        title="240 pixels"
        yDomain="data"
      />
    </View>
  );
}

Padding

Set padding to add outer spacing around the frame without changing the plotted line’s geometry.

Aster Labs price

import { LineChart } from "density-base-ui";
import { asterLabsPriceSeries } from "../charts/asterLabsPriceSeries";

export default function LineChartPaddingExample() {
  return (
    <LineChart
      aria-label="Aster Labs price with padding"
      data={asterLabsPriceSeries}
      padding
      title="Aster Labs price"
      yDomain="data"
    />
  );
}

Prop	Values	Required	Default	Behavior	Description
`animate`	`false`, `true`	Not required	—	—	Whether the chart marks animate into view.
`childrenEnd`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`childrenStart`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`color`	`chart-1`, `chart-2`, `chart-3`, `chart-4`, `chart-5`, `chart-6`, `positive`, `negative`, `neutral`	Not required	—	—	—
`data`	`import("density-base-ui/src/index").CartesianChartDatum[]`	Required	—	—	—
`emphasis`	`primary`, `secondary`, `outline`, `ghost-primary`	Not required	—	—	Controls the Density label color used by visible chart annotations.
`height`	`number`	Not required	—	—	—
`padding`	`false`, `true`	Not required	—	—	Outer spacing around the frame; does not affect plotted mark geometry.
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	Not required	—	—	Controls the Density label size used by visible chart annotations.
`spark`	`false`, `true`	Not required	—	—	—
`subtitle`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`title`	`import("@types/react/index").ReactNode`	Not required	—	—	—
`yDomain`	`zero`, `data`	Not required	—	—	Whether the y-axis includes zero or zooms to the padded data range.

This component also accepts props from native APIs. They are passed through and intentionally kept out of this focused Density API table.