---
title: "Series Markers"
framework: react
version: "14.1.0"
---

# Series Markers

Data points can be represented by markers in many series types, including `line`, `area`, `scatter`, and `bubble`.

Marker attributes such as `shape`, `size`, `fill` and `stroke` are configurable within each series.

These options are identical across series types, but differ in their location. Series without lines, such as `scatter` and `bubble` have these options on the series level, otherwise they are contained within the `marker` property.

```js
{
    series: [
        {
            // ...
            marker: {
                shape: 'square', // defaults to 'circle'
                size: 20,
                fill: 'red',
                stroke: 'maroon',
            },
        },
    ],
}
```

Please see the [API reference](#api-reference) for the list of all available options.

### Marker Shape, Size and Colour

#### Marker Shape, Size and Colour

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Fuel Spending (2019)",
    },
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "petrol",
        title: "Petrol",
        marker: {
          shape: "square",
          size: 10,
        },
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "diesel",
        title: "Diesel",
        stroke: "black",
        marker: {
          size: 15,
          fill: "gray",
          stroke: "black",
        },
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "electric",
        title: "Electric",
        stroke: "#8bc24a",
        marker: {
          shape: "cross",
          size: 20,
          fill: "#8bc24a",
          stroke: "#658d36",
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Marker Shape, Size and Colour](https://www.ag-grid.com/charts/reactFunctionalTs/markers/examples/marker-shape)

Notice how the shape and colour of the legend markers automatically match the shape and colour of the markers used by the series, but the size of the markers in the legend remains the same.

The legend item marker can be modified within the [Legend Options](https://www.ag-grid.com/charts/react/legend/#markers).

## Custom Marker Shapes

You can easily define custom marker shapes by providing a callback function to create the desired shape. This function takes `x` and `y` parameters, representing the marker's position on the canvas, the `size` of the marker and the `path` instance. The path includes various drawing methods that allow you to apply specific drawing commands to construct the marker. If you are familiar with the standard Canvas API, you'll feel right at home here. The `path` API is very similar to that of [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).

For example, to draw a heart:

```js
const rad = (degree) => {
    return (degree / 180) * Math.PI;
};

const heart = ({ x, y, path, size }) => {
    const r = size / 4;
    const yCoord = y + r / 2;

    path.clear();
    path.arc(x - r, yCoord - r, r, rad(130), rad(330));
    path.arc(x + r, yCoord - r, r, rad(220), rad(50));
    path.lineTo(x, yCoord + r);
    path.closePath();
};
```

All we do is render two partial circles with the `cubicArc` command and then two straight lines using the `lineTo` and `closePath` commands to get the shape of a heart.

Inside the marker config of a series we then use this callback function rather than using one of the predefined shape names:

```js
{
    marker: {
        shape: heart,
        size: 16,
    },
}
```

The final result is shown in the example below.

#### Custom Marker Shape

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AgMarkerShapeFnParams,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

const rad = (degree: number) => {
  return (degree / 180) * Math.PI;
};
const heart = ({ x, y, path, size }: AgMarkerShapeFnParams) => {
  const r = size / 4;
  const yCoord = y + r / 2;
  path.clear();
  path.arc(x - r, yCoord - r, r, rad(130), rad(330));
  path.arc(x + r, yCoord - r, r, rad(220), rad(50));
  path.lineTo(x, yCoord + r);
  path.closePath();
};
ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Fuel Spending (2019)",
    },
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "electric",
        title: "Electric",
        marker: {
          shape: heart,
          size: 16,
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Custom Marker Shape](https://www.ag-grid.com/charts/reactFunctionalTs/markers/examples/custom-marker)

## API Reference

#### Series Marker

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean |  | Whether to show markers. |
| itemStyler | Styler |  | Function used to return formatting for individual markers, based on the supplied information. |
| size | PixelSize |  | The size in pixels of the markers. |
| shape | 'circle' \| 'cross' \| 'diamond' \| 'heart' \| 'plus' \| 'pin' \| 'square' \| 'star' \| 'triangle' \| AgMarkerShapeFn |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| fillOpacity | Opacity |  | The opacity of the fill colour. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |