# Dots

> Mark resting and pointer-active data points in line and area charts.

Source: https://www.honestui.com/docs/charts/ui/dots

## Usage [#usage]

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.

```tsx
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>;
```

## Variants [#variants]

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

### Default [#default]

### variant='default'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Trail traffic
const data = [
  { month: "January", hikers: 415, cyclists: 189 },
  { month: "February", hikers: 1045, cyclists: 490 },
  { month: "March", hikers: 634, cyclists: 304 },
  { month: "April", hikers: 781, cyclists: 408 },
  { month: "May", hikers: 549, cyclists: 337 },
  { month: "June", hikers: 935, cyclists: 443 },
  { month: "July", hikers: 497, cyclists: 244 },
  { month: "August", hikers: 1124, cyclists: 561 },
  { month: "September", hikers: 769, cyclists: 385 },
  { month: "October", hikers: 646, cyclists: 383 },
  { month: "November", hikers: 971, cyclists: 506 },
  { month: "December", hikers: 365, cyclists: 162 },
];

const chartConfig = {
  hikers: {
    label: "Hikers",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  cyclists: {
    label: "Cyclists",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function DotDefaultLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="hikers">
        <LineChart.Dot variant="default" />
      </LineChart.Line>
      <LineChart.Line dataKey="cyclists">
        <LineChart.Dot variant="default" />
      </LineChart.Line>
    </LineChart>
  );
}

```

### Border [#border]

### variant='border'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Electricity price
const data = [
  { month: "January", dayAhead: 347, realTime: 155 },
  { month: "February", dayAhead: 881, realTime: 408 },
  { month: "March", dayAhead: 536, realTime: 254 },
  { month: "April", dayAhead: 661, realTime: 342 },
  { month: "May", dayAhead: 461, realTime: 283 },
  { month: "June", dayAhead: 788, realTime: 367 },
  { month: "July", dayAhead: 420, realTime: 202 },
  { month: "August", dayAhead: 952, realTime: 468 },
  { month: "September", dayAhead: 646, realTime: 323 },
  { month: "October", dayAhead: 544, realTime: 322 },
  { month: "November", dayAhead: 821, realTime: 420 },
  { month: "December", dayAhead: 311, realTime: 134 },
];

const chartConfig = {
  dayAhead: {
    label: "Day-ahead",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  realTime: {
    label: "Real-time",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function DotBorderLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="dayAhead">
        <LineChart.Dot variant="border" />
      </LineChart.Line>
      <LineChart.Line dataKey="realTime">
        <LineChart.Dot variant="border" />
      </LineChart.Line>
    </LineChart>
  );
}

```

### Colored Border [#colored-border]

### variant='colored-border'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Response latency
const data = [
  { month: "January", api: 381, web: 172 },
  { month: "February", api: 963, web: 449 },
  { month: "March", api: 585, web: 279 },
  { month: "April", api: 721, web: 375 },
  { month: "May", api: 505, web: 310 },
  { month: "June", api: 862, web: 405 },
  { month: "July", api: 459, web: 223 },
  { month: "August", api: 1038, web: 514 },
  { month: "September", api: 707, web: 354 },
  { month: "October", api: 595, web: 352 },
  { month: "November", api: 896, web: 463 },
  { month: "December", api: 338, web: 148 },
];

const chartConfig = {
  api: {
    label: "API",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  web: {
    label: "Web",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function DotColoredBorderLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="api">
        <LineChart.Dot variant="colored-border" />
      </LineChart.Line>
      <LineChart.Line dataKey="web">
        <LineChart.Dot variant="colored-border" />
      </LineChart.Line>
    </LineChart>
  );
}

```

### Ping [#ping]

### variant='ping'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Crop moisture
const data = [
  { month: "January", topsoil: 449, subsoil: 102 },
  { month: "February", topsoil: 1127, subsoil: 257 },
  { month: "March", topsoil: 683, subsoil: 167 },
  { month: "April", topsoil: 840, subsoil: 223 },
  { month: "May", topsoil: 594, subsoil: 190 },
  { month: "June", topsoil: 1008, subsoil: 230 },
  { month: "July", topsoil: 536, subsoil: 133 },
  { month: "August", topsoil: 1210, subsoil: 295 },
  { month: "September", topsoil: 830, subsoil: 211 },
  { month: "October", topsoil: 697, subsoil: 213 },
  { month: "November", topsoil: 1047, subsoil: 261 },
  { month: "December", topsoil: 393, subsoil: 93 },
];

const chartConfig = {
  topsoil: {
    label: "Topsoil",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  subsoil: {
    label: "Subsoil",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function DotPingLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="topsoil">
        <LineChart.Dot variant="ping" />
      </LineChart.Line>
      <LineChart.Line dataKey="subsoil">
        <LineChart.Dot variant="ping" />
      </LineChart.Line>
    </LineChart>
  );
}

```

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

## API Reference [#api-reference]

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


  ### `variant`

type: `&#x22;default&#x22; | &#x22;border&#x22; | &#x22;colored-border&#x22; | &#x22;ping&#x22; | &#x22;none&#x22;` · default: `&#x22;default&#x22;`

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