Dots

Compose a <Dot /> inside a <Line /> or <Area /> to render a resting marker at every data point. Add <ActiveDot /> for the marker shown during pointer hover. Both read the series color and style from the chart context.

Active dots are a visual pointer affordance. Keep required point values available through persistent text or a data table.

import { LineChart } from "honestui/charts";

<LineChart data={data} config={chartConfig} xDataKey="month">
  <LineChart.Line dataKey="highTemp">
    <LineChart.Dot variant="border" />
    <LineChart.ActiveDot variant="default" />
  </LineChart.Line>
</LineChart>;

Control the marker style with the variant prop on the <Dot /> (or <ActiveDot />) part.

Default

Border

Colored Border

Ping

ping is ECharts-only, a solid core wrapped in a translucent halo.

Both <Dot /> (the resting marker) and <ActiveDot /> (the hovered marker) accept the same props and are composed inside a <Line /> or <Area />.