# antuikit / ECharts Line

> An ECharts chart painted with the theme's chart colors, axes, tooltip and type scale, in light and dark mode, compact mode and inside a `ThemeScope`. It resizes with its element.

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

## Install

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

## Import

import { EChart, type EChartOption } from "@/components/ui/echarts-chart";

## Demos

- [Basic line](https://ui.antuikit.com/embed/echarts-line/basic.md): Set a series `type` to `line` over a `category` X axis to join one value per day, like orders across a week.
- [Smooth line](https://ui.antuikit.com/embed/echarts-line/smooth.md): Set `smooth` on a line series to draw a curve through the points instead of straight segments between them.
- [Basic area](https://ui.antuikit.com/embed/echarts-line/basic-area.md): Add an empty `areaStyle` to a line series to fill the space under it, with `boundaryGap` off so the area meets both edges.
- [Stacked lines](https://ui.antuikit.com/embed/echarts-line/stacked-line.md): Give several line series the same `stack` name so each one starts where the one below it ends, adding up visits by channel.
- [Stacked area](https://ui.antuikit.com/embed/echarts-line/stacked-area.md): Combine `stack` with `areaStyle` and `emphasis.focus` so hovering a band fades the others, with a label on the top series.
- [Gradient stacked area](https://ui.antuikit.com/embed/echarts-line/gradient-stacked-area.md): Fill each stacked band with a `LinearGradient` that runs from one series color to the next, on smooth lines with no stroke.
- [Step lines](https://ui.antuikit.com/embed/echarts-line/step.md): Set `step` to `start`, `middle` or `end` to draw each change as a jump, placed before, between or after the points.
- [Line and point style](https://ui.antuikit.com/embed/echarts-line/line-style.md): Use `lineStyle` for a thick dashed stroke and `itemStyle` with `symbol` and `symbolSize` for large outlined triangles.
- [Value axes](https://ui.antuikit.com/embed/echarts-line/cartesian.md): Pass `[x, y]` pairs to a line series over two `value` axes to plot a path in any order, not one value per category.
- [Vertical category axis](https://ui.antuikit.com/embed/echarts-line/y-category.md): Put the `category` axis on Y and values on X to read temperature against altitude, with a soft shadow on the line.
- [Log axis](https://ui.antuikit.com/embed/echarts-line/log-axis.md): Set the Y axis `type` to `log` so growth by powers and by halves both read as straight lines, with minor split lines.
- [Mark points and lines](https://ui.antuikit.com/embed/echarts-line/markers.md): Add `markPoint` for the highest and lowest days and `markLine` for the average, plus a line drawn from a fixed spot to the max.
- [Highlighted ranges](https://ui.antuikit.com/embed/echarts-line/area-pieces.md): Use a piecewise `visualMap` on the X dimension to fill only some ranges of an area, with `markLine` edges around them.
- [Peak sections](https://ui.antuikit.com/embed/echarts-line/peak-sections.md): Color segments of one line with a piecewise `visualMap` and shade the peak hours behind it with `markArea`.
- [Two X axes](https://ui.antuikit.com/embed/echarts-line/multiple-x-axes.md): Bind each series to its own X axis with `xAxisIndex` to compare the same months across two years on one value axis.
- [Dataset filter](https://ui.antuikit.com/embed/echarts-line/dataset-filter.md): Add a `filter` transform to a `dataset` to derive one dataset per country from a single table, then point each series at one.
- [Gradient line](https://ui.antuikit.com/embed/echarts-line/gradient-line.md): Color a line with a continuous `visualMap`, by value in the top grid and by position along the X axis in the bottom one.
- [Confidence band](https://ui.antuikit.com/embed/echarts-line/confidence-band.md): Stack two invisible line series and fill the upper one with `areaStyle` to draw a band around the line in the middle.
- [Large area](https://ui.antuikit.com/embed/echarts-line/large-area.md): Draw 20,000 points with `sampling` set to `lttb` and a gradient fill, starting zoomed in with an inside and a slider `dataZoom`.
- [Value bands](https://ui.antuikit.com/embed/echarts-line/air-quality.md): Color a long series by level with a piecewise `visualMap`, mark each threshold with `markLine` and zoom with `dataZoom`.
- [Time axis](https://ui.antuikit.com/embed/echarts-line/time-axis-area.md): Set the X axis `type` to `time` and pass timestamps with each value, so the labels follow the zoom level.
- [Function plot](https://ui.antuikit.com/embed/echarts-line/function-plot.md): Plot a function over 4,000 points on two value axes with minor ticks, panning and zooming both axes with inside `dataZoom`.
- [Linked grids](https://ui.antuikit.com/embed/echarts-line/linked-grids.md): Place two grids one above the other, link their pointers with `axisPointer.link` and zoom both with one `dataZoom`.
- [Two Y axes](https://ui.antuikit.com/embed/echarts-line/rainfall-flow.md): Plot flow and rainfall on two Y axes, with rainfall `inverse` from the top, and shade the flood period with `markArea`.
- [Polar line](https://ui.antuikit.com/embed/echarts-line/polar.md): Set `coordinateSystem` to `polar` with a value angle axis to plot a cardioid from radius and angle pairs.
- [Polar curve](https://ui.antuikit.com/embed/echarts-line/polar-curve.md): Trace a four-petal rose curve on a `polar` system with a radius axis that starts at zero and a slower draw animation.
- [Mark line labels](https://ui.antuikit.com/embed/echarts-line/markline-labels.md): Set `label.position` on each `markLine` to place its label at the start, middle or end, inside or outside the line.
- [Bump chart](https://ui.antuikit.com/embed/echarts-line/bump.md): Use an `inverse` value axis with `interval` 1 for ranks, smooth thick lines and an `endLabel` naming each series.
- [Graphic elements](https://ui.antuikit.com/embed/echarts-line/graphic.md): Add a `graphic` group to draw shapes and text over the chart, here a rotated stamp and a note box beside the line.
- [Live data](https://ui.antuikit.com/embed/echarts-line/live-time-axis.md): Push new points from a timer and call `setOption` with the updated `data`, so the time axis scrolls as values arrive.
- [Line race](https://ui.antuikit.com/embed/echarts-line/race.md): Set a long `animationDuration` with an `endLabel` on each series so the lines draw across the years like a race.
- [Easing](https://ui.antuikit.com/embed/echarts-line/easing.md): Set `animationEasing` on each series to compare every built-in easing curve in its own small grid, then replay the draw.
- [Touch tooltip](https://ui.antuikit.com/embed/echarts-line/touch-tooltip.md): Set `triggerOn` to `none` and give the axis pointer a `handle`, so the tooltip follows a drag rather than a hover.
- [Click to add points](https://ui.antuikit.com/embed/echarts-line/click-to-add.md): Listen for clicks on the chart surface and use `convertFromPixel` to turn each click inside the grid into a new point.
- [Draggable points](https://ui.antuikit.com/embed/echarts-line/draggable.md): Place invisible draggable `graphic` circles over each point and update the series `data` as they move.
- [Fisheye zoom](https://ui.antuikit.com/embed/echarts-line/fisheye.md): Drag a box over the chart to magnify it with axis `breaks`, which squeeze the data outside the box into the edges.

## 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/echarts-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-*)`.