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 "./asterLabsPriceSeries";

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

Props

Prop	Values	Default
`data`	`{ x: number \| string \| Date, y: number, label?: string }[]`	None
`aria-label`	string	None
`spark`	`true`, `false`	`false`
`color`	`chart-1` through `chart-6`, `positive`, `negative`, `neutral`	`chart-1`
`emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`sm`
`title`	string	None
`height`	number	Responsive default
`yDomain`	`zero`, `data`	`zero`

data and aria-label are required. Provide a label when the tooltip needs a more specific observation name. size controls the title and axis-label size, while emphasis controls their color.

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 } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";
import { asterLabsPriceSeries } from "./asterLabsPriceSeries";

export default function LineChartSparkExample() {
  return (
    <ExampleStack style={{ width: "100%" }}>
      <LineChart
        aria-label="Aster Labs intraday price trend"
        color="positive"
        data={asterLabsPriceSeries}
        spark
        style={{ width: "160px" }}
        yDomain="data"
      />
    </ExampleStack>
  );
}

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 "./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 } from "density-base-ui";
const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];
export default function LineChartColorExample() {
  return (
    <div style={styles.grid}>
      <LineChart
        aria-label="Chart 1"
        color="chart-1"
        data={data}
        height={100}
        title="Chart 1"
      />
      <LineChart
        aria-label="Chart 2"
        color="chart-2"
        data={data}
        height={100}
        title="Chart 2"
      />
      <LineChart
        aria-label="Chart 3"
        color="chart-3"
        data={data}
        height={100}
        title="Chart 3"
      />
      <LineChart
        aria-label="Chart 4"
        color="chart-4"
        data={data}
        height={100}
        title="Chart 4"
      />
      <LineChart
        aria-label="Chart 5"
        color="chart-5"
        data={data}
        height={100}
        title="Chart 5"
      />
      <LineChart
        aria-label="Chart 6"
        color="chart-6"
        data={data}
        height={100}
        title="Chart 6"
      />
      <LineChart
        aria-label="Positive"
        color="positive"
        data={data}
        height={100}
        title="Positive"
      />
      <LineChart
        aria-label="Negative"
        color="negative"
        data={data}
        height={100}
        title="Negative"
      />
      <LineChart
        aria-label="Neutral"
        color="neutral"
        data={data}
        height={100}
        title="Neutral"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Emphasis

Primary

Secondary

Outline

Ghost

import { LineChart } from "density-base-ui";
const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];
export default function LineChartEmphasisExample() {
  return (
    <div style={styles.grid}>
      <LineChart
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
      />
      <LineChart
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
      />
      <LineChart
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
      />
      <LineChart
        aria-label="Ghost"
        data={data}
        emphasis="ghost"
        height={120}
        title="Ghost"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Size

2xs

2xl

3xl

import { LineChart } from "density-base-ui";
const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];
export default function LineChartSizeExample() {
  return (
    <div style={styles.grid}>
      <LineChart
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
      />
      <LineChart
        aria-label="xs"
        data={data}
        height={100}
        size="xs"
        title="xs"
      />
      <LineChart
        aria-label="sm"
        data={data}
        height={100}
        size="sm"
        title="sm"
      />
      <LineChart
        aria-label="md"
        data={data}
        height={100}
        size="md"
        title="md"
      />
      <LineChart
        aria-label="lg"
        data={data}
        height={100}
        size="lg"
        title="lg"
      />
      <LineChart
        aria-label="xl"
        data={data}
        height={100}
        size="xl"
        title="xl"
      />
      <LineChart
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
      />
      <LineChart
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Title

Weekly visitors

import { LineChart } from "density-base-ui";
const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];
export default function LineChartTitleExample() {
  return (
    <LineChart
      aria-label="Weekly visitors"
      data={data}
      title="Weekly visitors"
    />
  );
}

Height

120 pixels

240 pixels

import { LineChart } from "density-base-ui";
const data = [
  { x: "Mon", y: 2 },
  { x: "Tue", y: 5 },
  { x: "Wed", y: 3 },
];
export default function LineChartHeightExample() {
  return (
    <div style={styles.grid}>
      <LineChart
        aria-label="120 pixel chart"
        data={data}
        height={120}
        title="120 pixels"
      />
      <LineChart
        aria-label="240 pixel chart"
        data={data}
        height={240}
        title="240 pixels"
      />
    </div>
  );
}
const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;