This tutorial will explain how you can set mouse cursor style for various actions on an element, like hover or press.
Cursor style properties
Each element in amCharts 4 has two properties which you can use to set how mouse cursor will change when interacting with the element:
Property | Type | Comment |
---|---|---|
cursorDownStyle |
MouseCursorStyle |
Applied when cursor is over element and button is pressed. |
cursorOverStyle |
MouseCursorStyle |
Applied when cursor is over element. |
Available cursor styles
The MouseCursorStyle
is a class which contains static properties for styles you can apply to a mouse cursor:
Style | Cursor look |
---|---|
MouseCursorStyle.default |
![]() |
MouseCursorStyle.grab |
![]() |
MouseCursorStyle.grabbing |
![]() |
MouseCursorStyle.horizontalResize |
![]() |
MouseCursorStyle.pointer |
![]() |
MouseCursorStyle.verticalResize |
![]() |
Setting style
Setting a style is pretty straightforward. You can set it on an element directly or on list template.
The following will make Pie chart slices change cursor to "pointer" when hovered:
pieSeries.slices.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
pieSeries.slices.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
{ // ... "series": [{ // ... "slices": { "cursorOverStyle": am4core.MouseCursorStyle.pointer } }] }
Try hovering over slices on the following live example:
See the Pen amCharts V4: Setting cursor style by amCharts (@amcharts) on CodePen.24419