markers
size: Number || Array of Numbers
Size of the marker point.
In a multi-series chart, you can provide an array of numbers to display different size of markers on different series
markers: {
size: [4, 7]
}
colors: Color || Array of Colors
Sets the fill color(s) of the marker point.
strokeColors: String || Array of Strings
Stroke Color of the marker. Accepts a single color or an array of colors in a multi-series chart.
strokeWidth: Number || Array of Numbers
Stroke Size of the marker.
strokeOpacity: Number || Array of Numbers
Opacity of the border around marker.
strokeDashArray: Number || Array of Numbers
Dashes in the border around marker. Higher number creates more space between dashes in the border.
fillOpacity: Number || Array of Numbers
Opacity of the marker fill color.
discrete: Array
Allows you to target individual data-points and style particular marker differently
markers: {
discrete: [{
seriesIndex: 0,
dataPointIndex: 7,
fillColor: '#e3e3e3',
strokeColor: '#fff',
size: 5,
shape: "circle"
}, {
seriesIndex: 2,
dataPointIndex: 11,
fillColor: '#f7f4f3',
strokeColor: '#eee',
size: 4,
shape: "circle"
}]
}
shape: String || Array of Strings
Shape of the marker.
Available Options for shape
- circle
- square
- line
- plus
- cross
- star
- sparkle
- diamond
- triangle
offsetX: Number
Sets the left offset of the marker
offsetY: Number
Sets the top offset of the marker
onClick: Function
When a marker is clicked, markers.onClick is called.
markers: {
onClick: function(e) {
// do something on marker click
}
}
Note: This event will not work for a shared and non-intersecting tooltip. You will have to modify your tooltip to the following code to catch the events.
tooltip: {
shared: false,
intersect: true
}
onDblClick: Function
When a marker is double clicked, markers.onDblClick is called.
markers: {
onDblClick: function(e) {
// do something on marker double click
}
}
Note: This event will not work for a shared and non-intersecting tooltip. You will have to modify your tooltip to the following code to catch the events.
tooltip: {
shared: false,
intersect: true
}
showNullDataPoints: Boolean
Whether to show markers for null values in a line/area chart. If disabled, any null values present in line/area charts will not be visible.
hover
size: Number
Fixed size of the marker when it is active
sizeOffset: Number
Unlike the fixed size, this option takes the original markers.size and increases/decreases the value based on it.
So, if markers.size: 6, markers.hover.sizeOffset: 3 will make the marker’s size 9 when hovered.