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.
<script lang="ts">
import { EChartsLineChart } from '$lib/components/evilcharts/charts/echarts-line-chart/index.js';
</script>
<EChartsLineChart {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
Border
Colored Border
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 />.