Pie Chart Balloon

Question

I have a difficulty with Pie Chart Balloon . I put link to the balloon but when I hover on balloon the balloon keeps blinking.

How to prevent balloon from blinking?

 var chart = AmCharts.makeChart( "chartdiv", { "type": "pie", "theme": "light", "dataProvider": [ { "status": "Completed", "value": 100, "color": "#33cc33" }, { "status": "On-Going", "value": 59, "color": "#1a53ff" }, { "status": "PRE Procurement", "value": 36, "color": "#ff0066" }, { "status": "DED Prep", "value": 40, "color": "#cc66ff" }, { "status": "Under Prep / Not Yet Started", "value": 23, "color": "#999966" }, { "status": "Suspended", "value": 34, "color": "#663300" }, { "status": "Cancelled", "value": 23, "color": "#ff0000" }, { "status": "No Status Yet", "value": 21, "color": "#ffff66" }], "startDuration": 1, "balloon": { //"hideBalloonTime": 1000, // 1second "disableMouseEvents": false, // allow click "fixedPosition": true }, "valueField": "value", "titleField": "status", "colorField": "color", "outlineAlpha": 0.4, "depth3D": 30, "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>", "angle": 50, "export": { "enabled": true } } ); 

 #chartdiv { width: 100%; height: 600px; } 

 <script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/pie.js"></script> <script src="//www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div> 

Answer 1

Added svg>g>g:last-child { pointer-events: none } to CSS file and looks it is working fine.

Check the below working code:

 var chart = AmCharts.makeChart("chartdiv", { "type": "pie", "theme": "light", "dataProvider": [{ "status": "Completed", "value": 100, "color": "#33cc33" }, { "status": "On-Going", "value": 59, "color": "#1a53ff" }, { "status": "PRE Procurement", "value": 36, "color": "#ff0066" }, { "status": "DED Prep", "value": 40, "color": "#cc66ff" }, { "status": "Under Prep / Not Yet Started", "value": 23, "color": "#999966" }, { "status": "Suspended", "value": 34, "color": "#663300" }, { "status": "Cancelled", "value": 23, "color": "#ff0000" }, { "status": "No Status Yet", "value": 21, "color": "#ffff66" }], "startDuration": 1, "balloon": { //"hideBalloonTime": 1000, // 1second "disableMouseEvents": false, // allow click "fixedPosition": true }, "valueField": "value", "titleField": "status", "colorField": "color", "outlineAlpha": 0.4, "depth3D": 30, "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>", "angle": 50, "export": { "enabled": true } }); 

 #chartdiv { width: 100%; height: 600px; } svg>g>g:last-child { pointer-events: none } 

 <script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/pie.js"></script> <script src="//www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div> 

Answer 2

Balloons are not the best choice for links in a pie chart since the flicker occurs once you move the cursor off the slice onto the balloon, which will disappear before you can click on it. There is no setting to disable this behavior. If you need the link in the balloon, set hideBalloonTime in the top level of the chart config to a large enough number (your commented code has this set as a balloon-object level config, which is incorrect). Note that the "flicker" will still occur if the user hovers over the balloon for too long.

 var chart = AmCharts.makeChart( "chartdiv", { "type": "pie", "theme": "light", "hideBalloonTime": 2000, //hideBalloonTime is set here. Value in milliseconds "dataProvider": [ { "status": "Completed", "value": 100, "color": "#33cc33" }, { "status": "On-Going", "value": 59, "color": "#1a53ff" }, { "status": "PRE Procurement", "value": 36, "color": "#ff0066" }, { "status": "DED Prep", "value": 40, "color": "#cc66ff" }, { "status": "Under Prep / Not Yet Started", "value": 23, "color": "#999966" }, { "status": "Suspended", "value": 34, "color": "#663300" }, { "status": "Cancelled", "value": 23, "color": "#ff0000" }, { "status": "No Status Yet", "value": 21, "color": "#ffff66" }], "startDuration": 1, "balloon": { //"hideBalloonTime": 1000, // does NOT go here "disableMouseEvents": false, // allow click "fixedPosition": true }, "valueField": "value", "titleField": "status", "colorField": "color", "outlineAlpha": 0.4, "depth3D": 30, "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>", "angle": 50, "export": { "enabled": true } } ); 

 #chartdiv { width: 100%; height: 600px; } 

 <script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/pie.js"></script> <script src="//www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div> 

A better option in this case would be to use CSS to make the slice appear to be clickable using addClassNames and use the clickSlice event to trigger your link (or modal, in your case):

 var chart = AmCharts.makeChart("chartdiv", { "type": "pie", "theme": "light", "addClassNames": true, //needed to change cursor for pie slice in CSS "dataProvider": [{ "status": "Completed", "value": 100, "color": "#33cc33" }, { "status": "On-Going", "value": 59, "color": "#1a53ff" }, { "status": "PRE Procurement", "value": 36, "color": "#ff0066" }, { "status": "DED Prep", "value": 40, "color": "#cc66ff" }, { "status": "Under Prep / Not Yet Started", "value": 23, "color": "#999966" }, { "status": "Suspended", "value": 34, "color": "#663300" }, { "status": "Cancelled", "value": 23, "color": "#ff0000" }, { "status": "No Status Yet", "value": 21, "color": "#ffff66" }], "startDuration": 1, "balloon": { //"hideBalloonTime": 1000, // 1second "disableMouseEvents": false, // allow click "fixedPosition": true }, "valueField": "value", "titleField": "status", "colorField": "color", "outlineAlpha": 0.4, "depth3D": 30, "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br>Click slice to view data</span>", "angle": 50, "export": { "enabled": true }, "listeners": [{ "event": "clickSlice", "method": function(e) { $("#complete").modal('show'); } }] }); $("#complete").modal({show: false}); 

 #chartdiv { width: 100%; height: 600px; } /* change cursor when hovering over slice */ .amcharts-pie-slice { cursor: pointer; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/pie.js"></script> <script src="//www.amcharts.com/lib/3/themes/light.js"></script> <div id="chartdiv"></div> <div class="modal fade" id="complete" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>