javascript - How to show hand cursor on pie charts slices using amcharts

Question

How can we make the pie charts slice as a hyperlink or how to show at least hand cursor on slices.

check the code below. which i am using creating a pie chart using amcharts.

var initChart = function() {
        if (chart) chart.destroy();
        var config = scope.config || {};

        chart = AmCharts.makeChart(scope.chartid, {
          "type": "pie",
          "theme": "light",
          "marginTop": 10,
          "marginBottom":10,

          "allLabels": [{
            "text": scope.index,
            "color": "green",
            "bold" : true,
            "align": "center",
            "size": 20,
            "y": 190,



          }],
          "dataProvider":scope.chartdata,

          "titleField": "title",
          "valueField": "percent",

          "fontSize": 14,
          "labelRadius": 10,
          "radius": "25%",
          "innerRadius": "45%",
          "labelText": "[[title]]",
           "balloonText":"Sales Amt: $[[amt]]",
            "showHandOnHover":true,
          "export": {
            "enabled": true
          },


          "responsive": {
            "enabled": true,
            "addDefaultRules": false,
            "rules": [
              {
                "maxWidth": 400,
                "overrides": {
                  "fontSize": 6,
                  "labelRadius": 5,
                  "radius": "20%",
                  "innerRadius": "40%",
                  "allLabels": [{
                    "text": "1.02",
                    "color": "green",
                    "bold" : true,
                    "align": "center",
                    "size": 10,
                    "y": 210,



                  }]
                }
              }
            ]
          },

          "pullOutOnlyOne":true,
          "startEffect":"easeOutSine",
          "pullOutEffect":"easeOutSine",
         "listeners": [{
            "event": "clickSlice",
            "method": function(e) {

              var dp = e.dataItem.dataContext;

              scope.selectoption1=dp.title;

              if(scope.selectoption1!="OTHERS"){

                var object ={

                "title":scope.selectoption1,
                "id":dp.id

              }


                $rootScope.$emit('selecteddonutchartdep', object);

              }



              e.chart.validateData();
            }
          }]


        })

      };

Is there a way to show hand cursor on pie chart slice

Answer 1

Here is the solution of your problem and this is the correct way to do this .. Below code and some css will do the magic.. AddClassname will add the appropriate class and effects that can make your graph a lot better and Css will add hand cursor only on the pie slice not on the overall area . Here is the fiddle.. https://jsfiddle.net/sahilweb6/wc8ezzn1/3/

Additional Script

"addClassNames": true,

  "innerRadius": "30%",
  "defs": {
    "filter": [{
      "id": "shadow",
      "width": "200%",
      "height": "200%",
      "feOffset": {
        "result": "offOut",
        "in": "SourceAlpha",
        "dx": 0,
        "dy": 0
      },
      "feGaussianBlur": {
        "result": "blurOut",
        "in": "offOut",
        "stdDeviation": 5
      },
      "feBlend": {
        "in": "SourceGraphic",
        "in2": "blurOut",
        "mode": "normal"
      }
    }]
  },

CSS

.amcharts-pie-slice {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition-duration: 0.3s;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  cursor: pointer;
  box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
  transform: scale(1.1);
  filter: url(#shadow);
}