This section explores the markers used by line, area and scatter series.
The shape of the markers can be changed by using the
stroke are also valid configs:
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:
Inside the marker object, you have access to the
size of the marker,
y coordinates of the data point and the
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
All we do is render two partial circles with the
cubicArc command and
then two straight lines using the
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:
The final result is shown in the example below.
Example: Custom Marker Shape
|Whether or not to show markers.|
|The shape to use for the markers. You can also supply a custom marker by providing a |
|The size in pixels of the markers.|
|For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels.|
|The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.|
|The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.|
|The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.|
|Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the |
Continue to the next section to learn about tooltips.