---
url: https://chartbuddy.io/embed/docs/configuration/point-markers.md
---
# Point markers

Line and area charts style markers under `line.pointMarker` / `area.pointMarker`. Markers render when `drawPoints` is on for that series (or forced visible on a single point).

## Defaults

```js
line: { // or area: { … }
  drawPoints: true,
  pointMarker: {
    shape: 'circle',
    radius: 3,
    fill: null,          // derive from series color
    stroke: '#ffffff',
    strokeWidth: 1,
    strokeDashArray: '', // '' = solid
    series: {},          // per-series style
    overrides: {},       // per-point style
  },
}
```

| Field | Notes |
|---|---|
| `shape` | `circle` · `square` · `triangle` · `diamond` · `cross` |
| `radius` | Size in px |
| `fill` | Color, or `null` to use the series color |
| `stroke` | Border color (`null` also derives from the series) |
| `strokeWidth` | Border width (px) |
| `strokeDashArray` | Border dash; `''` for solid |

Resolution is three-tier: **per-point → per-series → global → built-in default**.

## Per-series style (`pointMarker.series`)

Keys are **0-based series indices** (string keys in JSON are fine: `"0"`, `"1"`). Only set the fields you want to change.

```js
line: {
  drawPoints: true,
  pointMarker: {
    shape: 'circle',
    radius: 3,
    fill: null,
    stroke: '#ffffff',
    strokeWidth: 1,
    strokeDashArray: '',
    series: {
      '1': { shape: 'diamond', radius: 5 },
    },
    overrides: {},
  },
}
```

Turn markers on for one series only via `line.overrides` / `area.overrides` (not under `pointMarker`):

```js
line: {
  drawPoints: false,
  overrides: {
    '0': { drawPoints: true },
  },
  pointMarker: { /* … */ },
}
```

## Per-point overrides (`pointMarker.overrides`)

Sparse map: `overrides[seriesIndex][columnIndex]`. Column indices are **0-based data columns** (the category cells in that series row). Only list points you want to change.

```js
line: {
  drawPoints: true,
  pointMarker: {
    shape: 'circle',
    radius: 3,
    fill: null,
    stroke: '#ffffff',
    strokeWidth: 1,
    strokeDashArray: '',
    series: {},
    overrides: {
      '0': {
        '2': { shape: 'square', radius: 6, fill: '#c45c26' },
        '5': { visible: false },
      },
    },
  },
}
```

| Override field | Effect |
|---|---|
| `shape` / `radius` / `fill` / `stroke` / `strokeWidth` / `strokeDashArray` | Same as global |
| `visible` | Force show (`true`) or hide (`false`) this point, regardless of `drawPoints` |

Hide one point:

```js
overrides: {
  '0': { '3': { visible: false } },
}
```

Emphasize a couple of points:

```js
overrides: {
  '0': {
    '2': { radius: 6, stroke: '#0f766e', strokeWidth: 2 },
    '4': { shape: 'triangle', radius: 5 },
  },
}
```

## Live patches

`line` / `area` bags replace as a whole on `setChartData`. To add one point override without dropping others, merge client-side:

```js
const cd = insight.getChartData();
const pm = cd.line.pointMarker;
const prev = pm.overrides?.['0'] || {};

insight.setChartData({
  line: {
    ...cd.line,
    pointMarker: {
      ...pm,
      overrides: {
        ...pm.overrides,
        '0': {
          ...prev,
          '4': { radius: 6 },
        },
      },
    },
  },
});
```

For a full upfront `chartData` object, author the sparse `series` / `overrides` maps directly.