LineChart

LineChart shows a single trend for usage, revenue, releases, or throughput without a chart dependency.

#Default usage

<LineChart
  ariaLabel="API requests over time"
  data={[
    { day: "Mon", requests: 1200 },
    { day: "Tue", requests: 1680 },
    { day: "Wed", requests: 1420 },
    { day: "Thu", requests: 2100 },
    { day: "Fri", requests: 1960 },
  ]}
  showDots
  tone="info"
  xKey="day"
  yKey="requests"
/>

#Import

import { LineChart } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Pass ariaLabel or aria-label so the SVG has a useful image name. Pair the chart with a visible metric when exact values matter.

#API

• data: records for the trend.
• xKey: category or time field.
• yKey: numeric field.
• height: SVG height.
• ariaLabel: accessible chart label.
• showGrid: toggles the baseline grid.
• showDots: renders point markers.
• tone: default, success, info, warning, or error.
• className: style hook for layout.
• Legacy labelKey and valueKey remain supported.

#Styling

LineChart uses .eui-line-chart, .eui-line-chart__grid, .eui-line-chart__line, and .eui-line-chart__point. Prefer className for layout and keep chart colors token-based through tone.