Line Chart React component

Line Chart is a free multi-series line chart drawn as a self-contained SVG, with no charting library (its only dependencies are clsx and tailwind-merge). It plots up to four smoothed series, each with an optional gradient area, shades a highlighted zone and draws a dashed reference line. A badge at the right edge labels each series' last value, and hovering shows a crosshair, the point's date and every series' value.

Data is dataPoints, an array of { x, date, v1, v2, v3, v4 }: x is the axis label, date is the hover caption and v1 to v4 map to series1 to series4. Each series takes label, color, style (solid, dashed or dotted), area, showBadge and visible. The axis uses yMin, yMax and yStep, and zone, referenceLine, startLabel and markerIndices add the annotations. theme switches between light and dark colors, and on narrow containers the chart gets shorter so its text isn't squashed.

Use it for metric trends over time, such as revenue, activation, retention or latency, comparing a few series on a dashboard or report page.

For a single small trend inside a card, use Sparkline Stat. For per-period totals split into parts, use Bar Chart.