LineChart

Usage

import { InteractiveLineChart } from "@vesture/react";

const data = [
  { x: "Jan", revenue: 120, cost: 90 },
  { x: "Feb", revenue: 180, cost: 110 },
  { x: "Mar", revenue: 150, cost: 130 },
];

// The parent needs an explicit height — InteractiveLineChart measures it
// via ResizeObserver to auto-size its width.
<div style={{ height: 320 }}>
  <InteractiveLineChart
    data={data}
    series={[
      { key: "revenue", label: "Revenue" },
      { key: "cost", label: "Cost" },
    ]}
  />
</div>

// Server component / static report — no client JS, explicit dimensions:
import { LineChart } from "@vesture/react";

<LineChart width={640} height={320} data={data} series={[{ key: "revenue", label: "Revenue" }]} />

Behavior

• LineChart takes explicit width/height and renders no event handlers — safe in a server component, has no "use client" directive, and ships zero client JS of its own.
• InteractiveLineChart auto-sizes to its parent container (ResizeObserver via @visx/responsive's ParentSize, so its parent needs an explicit height), and adds a nearest-point hover tooltip plus a legend below the chart.
• Clicking a legend item hides that series' line; a series keeps its assigned color if a sibling is hidden, rather than the remaining colors shifting.
• xScale defaults to inferring from the first data point's x type: a Date infers "time", a number infers "linear", a string infers "band" — override explicitly if your data's x type is ambiguous.
• Series colors cycle through the theme's 8 chart tokens (vars.chart.series1-8) in order; a 9th+ series wraps back to series1, so the legend label becomes the only way to distinguish them.