# antuikit / ECharts Scatter > 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-scatter ## Install npx antuikit@latest init npx antuikit@latest add echarts-chart ## Import import { EChart, type EChartOption } from "@/components/ui/echarts-chart"; ## Demos - [Basic scatter](https://ui.antuikit.com/embed/echarts-scatter/basic.md): A `scatter` series plots each pair of values as a point, here ad spend against the sign-ups it brought in. - [Ripple effect](https://ui.antuikit.com/embed/echarts-scatter/effect-scatter.md): An `effectScatter` series draws rippling points over a plain scatter, to call out the lightest and heaviest birds. - [Anscombe's quartet](https://ui.antuikit.com/embed/echarts-scatter/anscombe-quartet.md): Four `grid` panels share one `markLine` fit, showing four very different data sets with the same summary statistics. - [Punch card](https://ui.antuikit.com/embed/echarts-scatter/punch-card.md): A `symbolSize` callback sizes each point by its count on two category axes, with an `animationDelay` per point. - [Polar punch card](https://ui.antuikit.com/embed/echarts-scatter/polar-punch-card.md): The same punch card on a `polar` coordinate system, with hours around the circle and days along the radius. - [Jitter](https://ui.antuikit.com/embed/echarts-scatter/jitter.md): Set `jitter` on a category axis to spread overlapping points sideways, so a thousand values per day stay readable. - [Single axis](https://ui.antuikit.com/embed/echarts-scatter/single-axis.md): One `singleAxis` per day stacks seven rows of points, each sized by its count, with a title beside every row. - [Labels along the top](https://ui.antuikit.com/embed/echarts-scatter/label-align-top.md): A `labelLayout` with a fixed `y` lines every label up at the top, with `labelLine` leaders and `hideOverlap`. - [Labels along the right](https://ui.antuikit.com/embed/echarts-scatter/label-align-right.md): A `labelLayout` callback moves every label to the right edge and shifts overlapping ones with `moveOverlap`. - [Gradient bubbles](https://ui.antuikit.com/embed/echarts-scatter/bubble-gradient.md): Fill each bubble with a `RadialGradient` and a soft shadow, sized by population, comparing two years of data. - [Brush and marks](https://ui.antuikit.com/embed/echarts-scatter/flipper-and-mass.md): Two series with `brush` selection, a dashed `markArea` around each range, `markPoint` extremes and `markLine` averages. - [Linear regression](https://ui.antuikit.com/embed/echarts-scatter/linear-regression.md): A `line` series draws a least squares fit through the points, with the fitted formula in its `endLabel`. - [Exponential regression](https://ui.antuikit.com/embed/echarts-scatter/exponential-regression.md): A `smooth` line follows an exponential fit of fast growing values, with the fitted formula at its end. - [Logarithmic regression](https://ui.antuikit.com/embed/echarts-scatter/logarithmic-regression.md): Two years split by a `filter` transform share one logarithmic trend line, with `visualMap` sizing each point. - [Polynomial regression](https://ui.antuikit.com/embed/echarts-scatter/polynomial-regression.md): A third order polynomial fit drawn as a `smooth` line, bending through points that a straight line would miss. - [Clustering](https://ui.antuikit.com/embed/echarts-scatter/clustering.md): A piecewise `visualMap` colors each point by the cluster it falls into, after splitting the points into six groups. - [Points to bars](https://ui.antuikit.com/embed/echarts-scatter/aggregate-bar.md): A `universalTransition` morphs each group of points into the bar for its average, and back again. - [Clustering step by step](https://ui.antuikit.com/embed/echarts-scatter/clustering-process.md): A `timeline` steps through each split, with `custom` series drawing the points and a ring around the new cluster. - [Symbol morph](https://ui.antuikit.com/embed/echarts-scatter/symbol-morph.md): Change `symbol` on a timer and `universalTransition` morphs a grid of points from one shape into the next. - [Large data](https://ui.antuikit.com/embed/echarts-scatter/large.md): Set `large` to draw a million points from typed arrays in one pass, with `dataZoom` to look closer. - [Nebula](https://ui.antuikit.com/embed/echarts-scatter/nebula.md): A million points in a spiral cloud, drawn in `large` mode with a `dataZoom` slider on each axis. - [Visual map on many points](https://ui.antuikit.com/embed/echarts-scatter/visual-map-stream.md): A continuous `visualMap` colors sixteen thousand points by price, and dragging its handles filters them. - [Air quality](https://ui.antuikit.com/embed/echarts-scatter/air-quality.md): Two `visualMap` components map one value to point size and another to lightness, across three cities. - [Nutrients](https://ui.antuikit.com/embed/echarts-scatter/nutrients.md): Pick the fields on each axis and the points animate to their new places, colored by food group with `visualMap`. - [Linked panels](https://ui.antuikit.com/embed/echarts-scatter/nutrients-matrix.md): Four `grid` panels with linked `axisPointer` lines and `dataZoom` sliders, each axis picking its own field. - [Timeline](https://ui.antuikit.com/embed/echarts-scatter/life-expectancy-timeline.md): A `timeline` plays two centuries of income and life expectancy by country, on a `log` axis with bubbles by population. - [Data colors](https://ui.antuikit.com/embed/echarts-scatter/painter-colors.md): An `itemStyle.color` callback paints each point in the color it stands for, the hues painters used over time. - [Scatter on a map](https://ui.antuikit.com/embed/echarts-scatter/world-population.md): A `scatter` series on a `geo` component places each country at its location, sized by population. ## 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 `` to re-theme a region. Use ``, 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-*)`.