AreaChart

AreaChart fills under each series with a translucent accent tint and draws the same monotone stroke as LineChart.

Usage

import { AreaChart } from "@komponents/ui";

<AreaChart
  summary="Active users this month"
  series={[
    {
      id: "users",
      label: "Active",
      data: [
        { x: 1, y: 20 },
        { x: 2, y: 28 },
        { x: 3, y: 24 },
        { x: 4, y: 35 },
      ],
    },
  ]}
>
  <AreaChart.Tooltip />
</AreaChart>

Preview

Accessibility

• The SVG is role="img" named by the required summary, which is also rendered as an sr-only caption
• Every point is focusable and labelled "{series}: {x}, {y}", so the series can be read with Tab alone
• Focus opens the same tooltip as hover, and blur closes it
• Axis ticks and gridlines are aria-hidden — the summary carries the shape of the data
• status="loading" and status="empty" announce through role="status"; status="error" uses role="alert"