amcharts / amcharts3

JavaScript Charts V3
Other
395 stars 129 forks source link

Guide balloons are not usable with disablemouseevents #122

Open zontafil opened 7 years ago

zontafil commented 7 years ago

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
    }
}
martynasma commented 7 years ago

Looks like disableMouseEvents does not work for guide balloons.

Will let you know when the fix is available. (sorry no ETA)

martynasma commented 7 years ago

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.

BdDragos commented 5 years ago

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.