# Dots

Point markers for line, area, and composed charts.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Usage [#usage]

Compose a `<Dot />` inside a `<Line />` or `<Area />` to render resting markers. Add `<ActiveDot />` for the marker shown at the hovered point. Both read their series color from chart context.

```tsx
import { ChartcnLineChart } from "@/components/chart/line-chart";

<ChartcnLineChart.Line dataKey="desktop">
  <ChartcnLineChart.Dot variant="border" />
  <ChartcnLineChart.ActiveDot variant="default" />
</ChartcnLineChart.Line>;
```

## Variants [#variants]

Control the marker style with the `variant` prop on either component.

### Default [#default]

<ComponentPreview base="chartgpu" name="chart-ui-variants-demo" title="variant='default'">
  <ChartgpuDotVariantDemo />
</ComponentPreview>

### Border [#border]

<ComponentPreview base="chartgpu" name="chart-ui-variants-demo" title="variant='border'">
  <ChartgpuDotVariantDemo variant="border" />
</ComponentPreview>

### Colored Border [#colored-border]

<ComponentPreview base="chartgpu" name="chart-ui-variants-demo" title="variant='colored-border'">
  <ChartgpuDotVariantDemo variant="colored-border" />
</ComponentPreview>

### Ping [#ping]

<ComponentPreview base="chartgpu" name="chart-ui-variants-demo" title="variant='ping'">
  <ChartgpuDotVariantDemo variant="ping" />
</ComponentPreview>

`ping` renders a solid core wrapped in a translucent halo.

## API Reference [#api-reference]

Both `<Dot />` and `<ActiveDot />` accept the same props. Resting dots reveal with their series animation and are omitted automatically when the visible data density becomes too high.

| Prop      | Type                                                            | Default     | Description                       |
| --------- | --------------------------------------------------------------- | ----------- | --------------------------------- |
| `variant` | `"default" \| "border" \| "colored-border" \| "ping" \| "none"` | `"default"` | Visual style of the point marker. |