||

Dots

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Point markers for line, area, and composed charts.

Usage

Compose a <Dot /> inside a <Line /> (or <Area />) to render a resting marker at every data point, and an <ActiveDot /> for the marker shown while that point is hovered. Both read the series color and style from the chart context.

import { EChartsLineChart } from "@/components/evilcharts/charts/echarts-line-chart";
 
<EChartsLineChart data={data} config={chartConfig} xDataKey="month">
  <EChartsLineChart.Line dataKey="desktop">
    <EChartsLineChart.Dot variant="border" />
    <EChartsLineChart.ActiveDot variant="default" />
  </EChartsLineChart.Line>
</EChartsLineChart>;

Variants

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

Default

variant='default'

Border

variant='border'

Colored Border

variant='colored-border'

Ping

variant='ping'

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

API Reference

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

PropTypeDefaultDescription
variantdefault|border|colored-border|ping|none"default"

Visual style of the point marker. <Dot> sets the resting marker; <ActiveDot> sets the marker shown on hover.

Did you like the content?