Manipulating mouse cursor style

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:

Open in CodePen