Dots

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.

Copyimport { ChartcnLineChart } from "@/components/chart/line-chart";
 
<ChartcnLineChart.Line dataKey="desktop">
  <ChartcnLineChart.Dot variant="border" />
  <ChartcnLineChart.ActiveDot variant="default" />
</ChartcnLineChart.Line>;

Variants

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

Default

Border

Colored Border

Ping

ping renders a solid core wrapped in a translucent halo.

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.