# antuikit / Recharts Line

> A responsive frame for one Recharts chart that paints its grid, axes, cursor and labels with the theme's chart colors and exposes each series color as `var(--series-<key>)`.

Docs: https://antuikit.com/docs/components/recharts-line

## Install

npx antuikit@latest init
npx antuikit@latest add recharts-chart

## Import

import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/recharts-chart";

## Demos

- [Simple](https://ui.antuikit.com/embed/recharts-line/simple.md): Draw two `Line` series over a grid in a `LineChart`, with a tooltip and a legend naming each series from the config.
- [Dashed lines](https://ui.antuikit.com/embed/recharts-line/dashed.md): Set `strokeDasharray` on a `Line` to draw it dashed, like an even dash for a target and an uneven pattern for a projection.
- [Vertical layout](https://ui.antuikit.com/embed/recharts-line/vertical.md): Set `layout="vertical"` on the chart to list the categories down the Y axis and run the values along the X axis.
- [Custom domain](https://ui.antuikit.com/embed/recharts-line/vertical-domain.md): Pass `domain` to the value axis to set its range, here from zero to `"dataMax + 1000"` so the longest line keeps some room.
- [Two Y axes](https://ui.antuikit.com/embed/recharts-line/biaxial.md): Give each `YAxis` a `yAxisId` and point each `Line` at one, to compare revenue in dollars with a conversion rate in percent.
- [Connect nulls](https://ui.antuikit.com/embed/recharts-line/connect-nulls.md): Set `connectNulls` on a `Line` to draw straight across a missing value, where the first chart leaves a gap.
- [Axis padding](https://ui.antuikit.com/embed/recharts-line/axis-padding.md): Pass `padding` to the `XAxis` to leave space before the first point and after the last, without changing the scale.
- [Reference lines](https://ui.antuikit.com/embed/recharts-line/reference-lines.md): Add a `ReferenceLine` at an `x` category or a `y` value, with a `label`, to mark a deploy and a response time limit.
- [Negative values](https://ui.antuikit.com/embed/recharts-line/negative-values.md): Hide the axis lines and draw a `ReferenceLine` at zero on each axis, so the axes cross at the origin when values go negative.
- [Custom dot](https://ui.antuikit.com/embed/recharts-line/custom-dot.md): Pass a component to `dot` to draw each point yourself, like a happy face above the threshold and a sad one below it.
- [Custom labels](https://ui.antuikit.com/embed/recharts-line/custom-label.md): Pass a component to `label` to print each value above its point, and to the axis `tick` to rotate long category names.
- [Separate data](https://ui.antuikit.com/embed/recharts-line/multi-series.md): Give each `Line` its own `data` and set `allowDuplicatedCategory={false}` on the `XAxis` to merge the categories they share.
- [Axis interval](https://ui.antuikit.com/embed/recharts-line/axis-interval.md): Set `interval` on the axes to choose which ticks stay when they do not all fit, like keeping the first, the last or every other one.
- [Sparkline](https://ui.antuikit.com/embed/recharts-line/tiny.md): Drop the axes, grid and dots and give the chart a small fixed size to show a trend beside a number.
- [Synchronized](https://ui.antuikit.com/embed/recharts-line/synchronized.md): Give charts the same `syncId` to share the tooltip as you hover, and add a `Brush` to one of them to zoom all three.
- [Sync different data](https://ui.antuikit.com/embed/recharts-line/synchronized-different-data.md): Pass a function to `syncMethod` to match charts whose points do not line up, snapping the tooltip to the nearest date.
- [Legend hover](https://ui.antuikit.com/embed/recharts-line/legend-hover.md): Hover a legend item to fade the other series and raise its `Line` with `zIndex`, so the line you point at draws on top.
- [Fade-in shape](https://ui.antuikit.com/embed/recharts-line/fade-in-shape.md): Pass a `shape` that fades the line in on its entrance animation, while swapping the data keeps the default update animation.
- [Streaming data](https://ui.antuikit.com/embed/recharts-line/animated-time-series.md): Set `animationMatchBy` to animate a moving window by matching points on their time, so lines slide instead of morphing.
- [Drag to zoom](https://ui.antuikit.com/embed/recharts-line/highlight-zoom.md): Drag across the chart to draw a `ReferenceArea`, then zoom both axes to that range when you let go.
- [Compare two lines](https://ui.antuikit.com/embed/recharts-line/compare-two-lines.md): Track the hovered point with `onMouseMove` to fade the rest of each line through a gradient and join both values with a `ReferenceLine`.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/recharts-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.