amcharts3
amcharts3 copied to clipboard
Guide balloons are not usable with disablemouseevents
I'm trying to add a link to a guide balloon, so I set disableMouseEvents to false.
However, on mouseover the balloon is hidden.
http://jsfiddle.net/6kqL7L3q/
{
"type": "serial",
"theme": "light",
"dataProvider": [{
"year": 2000,
"cars": 0
}, {
"year": 2001,
"cars": 0
}, {
"year": 2002,
"cars": 0
}, {
"year": 2003,
"cars": 0
}, {
"year": 2004,
"cars": 0
}],
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"position": "left",
"title": "PCS/MIN"
}],
"balloon": {
"hideBalloonTime": 5000, // 5 second
"disableMouseEvents": false, // allow click
"fixedPosition": true
},
"graphs": [{
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.2,
"hidden": false,
"lineAlpha": 1,
"title": "Cars",
"valueField": "cars"
}],
"plotAreaBorderAlpha": 0,
"marginTop": 10,
"marginLeft": 0,
"marginBottom": 0,
"chartScrollbar": {},
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "year",
"categoryField": "year",
"categoryAxis": {
"startOnAxis": true,
"gridAlpha": 0.07,
"title": "Year",
"guides": [{
category: "2001",
toCategory: "2003",
lineColor: "#FF846F",
lineAlpha: 1,
fillAlpha: 1,
fillColor: "#FF846F",
inside: true,
balloonText: '<p style="font-size: 10px; margin-bottom: 15px; color:#000000">Maintenance</p>\
<p style="font-size: 10px; margin-bottom: 15px; color:#000000">Maintenance</p>\
<p style="font-size: 10px; margin-bottom: 15px; color:#000000">Maintenance</p>\
<p style="font-size: 10px; margin-bottom: 15px; color:#000000">Maintenance</p>\
<a href="#">MORE INFO</a>'
}]
},
"export": {
"enabled": true
}
}
Looks like disableMouseEvents
does not work for guide balloons.
Will let you know when the fix is available. (sorry no ETA)
OK, so the issue is that disableMouseEvents: false
DOES work, and it generates a rollout event, which effectively hides the balloon.
As a workaround, try delaying balloon fade out with fadeOutDuration
:
"balloon": {
"disableMouseEvents": false, // allow click
"fixedPosition": true,
"fadeOutDuration":5
}
I hope you find this useful.
Is there any update for this issue? I use the latest version of 3 and I have the same problem. The workaround works, but it's not exactly what we are all searching for.