Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript ChartsSeries Markers

Data points in line, area and scatter series can be represented by markers.

Marker attributes such as shape, size, fill and stroke are configurable via the chart options:

marker: {
    shape: 'square', // defaults to 'circle'
    size: 20,
    fill: 'red',
    stroke: 'maroon'
}

Please see the API reference for the list of all available options.

Example: Marker Shape, Size and Colour

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

Custom Marker Shapes

It's possible to define custom marker shapes with relative ease. All you have to do is extend the Marker class and define a single method called updatePath, for example to draw a heart:

import { Marker } from "./marker";

export class Heart extends Marker {
    toRadians(degrees) {
        return degrees / 180 * Math.PI;
    }

    updatePath() {
        const { x, path, size, toRadians } = this;
        const r = size / 4;
        const y = this.y + r / 2;

        path.clear();
        path.cubicArc(x - r, y - r, r, r, 0, toRadians(130), toRadians(330), 0);
        path.cubicArc(x + r, y - r, r, r, 0, toRadians(220), toRadians(50), 0);
        path.lineTo(x, y + r);
        path.closePath();
    }
}

Inside the marker object, you have access to the size of the marker, the x and y coordinates of the data point and the path instance, which you can use to issue draw commands. 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.

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 the marker's constructor function itself rather than using one of the predefined shape names:

marker: {
    shape: Heart,
    size: 16
}

The final result is shown in the example below.

Example: Custom Marker Shape

API Reference

Properties available on the AgCartesianSeriesMarker<DatumType> interface.

formatter
AgCartesianSeriesMarkerFormatter<DatumType>
Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the highlighted property will be set to true; make sure to check this if you want to differentiate between the highlighted and un-highlighted states. 
formatter: AgCartesianSeriesMarkerFormatter<DatumType>;

type AgCartesianSeriesMarkerFormatter = 
      (params: AgCartesianSeriesMarkerFormatterParams<DatumType>) => AgCartesianSeriesMarkerFormat 
    | undefined


interface AgCartesianSeriesMarkerFormatterParams<DatumType> {
  xKey: string;
  yKey: string;
  datum: DatumType;
  fill?: CssColor;
  stroke?: CssColor;
  strokeWidth: PixelSize;
  size: number;
  highlighted: boolean;
  seriesId: string;
}

type CssColor = string

type PixelSize = number

interface AgCartesianSeriesMarkerFormat {
  fill?: CssColor;
  stroke?: CssColor;
  strokeWidth?: PixelSize;
  size?: PixelSize;
}
enabled
boolean
Whether or not to show markers.
Default: true
shape
string | Marker
The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.
Default: 'circle'
Options: 'circle', 'cross', 'diamond', 'plus', 'square', 'triangle'
size
PixelSize
The size in pixels of the markers.
Default: 8
size: PixelSize;

type PixelSize = number
maxSize
PixelSize
For series where the size of the marker is determined by the data, this determines the largest size a marker can be in pixels.
Default: 30
maxSize: PixelSize;

type PixelSize = number
fill
string
The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.
fillOpacity
Opacity
Opacity of the marker fills. 
fillOpacity: Opacity;

type Opacity = number
stroke
string
The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.
strokeWidth
number
The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.
strokeOpacity
Opacity
Opacity of the marker strokes. 
strokeOpacity: Opacity;

type Opacity = number