Normal XYCursor is hidden automatically when plot area is no longer hovered. This tutorial shows how you can easily make it "sticky", that is make it stay in its last known location.
Enabling
XYCursor does not have a built-in setting to make it "sticky", so we'll have to improvise.
For that we'll use two components:
cursorpositionchangedevent.triggerMove()method.
Whenever cursor's position changes, it invokes cursorpositionchanged event. We'll add a listener, so we can "affix" the cursor's position to that place.
For that we will be using cursor's own triggerMove(point, stick) method.
The first parameter is easy: it's a point to where cursor is pointing to. We'll easily extract it from the cursor itself.
The second parameter is responsible for the "stickiness" of the cursor. "soft" means the cursor will move to selected point, and stay there until we hover plot area in some other place.
chart.cursor.events.on("cursorpositionchanged", function(ev) {
ev.target.triggerMove(ev.target.point, "soft");
});
chart.cursor.events.on("cursorpositionchanged", function(ev) {
ev.target.triggerMove(ev.target.point, "soft");
});
{
// ...
"cursor": {
"type": "XYCursor",
"events": {
"cursorpositionchanged", function(ev) {
ev.target.triggerMove(ev.target.point, "soft");
})
}
}
}
What's going in the above code, is whenever position of the cursor changes, we instruct the cursor to move to that same place, but stick there.
Example
See the Pen amCharts 4: Sticky cursor by amCharts team (@amcharts) on CodePen.0