Point style
Points (also referred to as "markers") may appear in a line, sparkline, radar, or bubble chart. Point style can be configured globally using the options.elements.point object. See Chart.js point configuration for more details.
You may configure the following properties on the options.elements.point object:
Properties of options.elements.point
| Name | Description |
|---|---|
| backgroundColor | Fill color for points with inner space (e.g. circle, triangle) |
| borderColor | Color for points without inner space (e.g. star), border color for points with inner space (e.g. circle, triangle) |
| borderWidth | Border width in pixels. Defaults to 1 |
| radius | Point radius in pixels |
| rotation | Rotation of point shape, in degrees |
| pointStyle | Determines the shape of the point. Use this to customize the markers on your charts. One of the following values: circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle. Paid accounts may also use a custom image as a point. |
To configure only the points for a specific data series, have a look at the Chart.js documentation for individual dataset properties. In particular, lines and radar charts can customize their points by setting the following. You may configure the following properties on the datasets object.
Properties of datasets that can be used for point customization
| Name | Description |
|---|---|
| pointBackgroundColor | Fill color for points with inner space (e.g. circle, triangle) |
| pointBorderColor | Color for points without inner space (e.g. star), border color for points with inner space (e.g. circle, triangle) |
| pointBorderWidth | Border width in pixels. Defaults to 1 |
| pointRadius | Point radius in pixels |
| pointRotation | Rotation of point shape, in degrees |
| pointStyle | Determines the shape of the point. One of the following values: circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle. Paid accounts may also use a custom image as a point. |
Here's an example of a chart with heavy usage of custom point styles:
For more examples of charts with different point styles, see the chart gallery.