3D Donut chart click event issue on edges of chart

Question

I have 3d donut chart , in that chart i want to click(anywhere on the chart on surface as well as edge of chart) on one slice of donut and redirect to another URl.

Its working if I click on surface of chart or first hover over surface and then then clicking on edge of chart.
Click event and tooltip not working if I directly hover over edge of 3d donut chart and click. Both tooltip and click event not working.

Is there any solution if I want to click anywhere on the 3d donut chart without condition(first hover to the surface and then the edge ) chart slice and do some action.

Can somebody help me?

**Updated **

Jsffidle:: https://jsfiddle.net/176anruf/12/

click on 3d shadow without hover over surface , click event doent work.

Please remove the code formatting on your question, then read the red warning on what you need to do next. — Yunnosch, Sep 07 '18 at 06:49
Maybe working around the systems warning that you should provide code to accompany a fiddle link has to do with that. And that the fiddle link is not clickable (because of your workaround). — Yunnosch, Sep 07 '18 at 11:19
You did read the red warning, didn't you? It is something like "if you link to fiddle, you have to provide code here in your question, too". You did not. Instead you code-formatted something which is not code. By that you broke the otherwise more helpful functionality of a link - and worked around a system limitation which is in place to make questions more answerable and more convenient to read for people who might decide to help you. — Yunnosch, Sep 07 '18 at 11:22
I did not downvote by the way. I am venting my feelings as politely as possible and as helpfully as possible. — Yunnosch, Sep 07 '18 at 11:24
Hi @pbhle - it looks like a bug to me so I have reported this: https://github.com/highcharts/highcharts/issues/8906 - Thanks! — Paweł Fus, Sep 07 '18 at 14:18

score 0 · Answer 1 · answered Sep 09 '18 at 18:25

If I understood your question , you want click event on the whole chart area.

Then the event needs to be added to chart block:

chart: {
 events: {
    click: function(event) {
      alert(' clicked\n' +
        'Alt: ' + event.altKey + '\n' +
        'Control: ' + event.ctrlKey + '\n' +
        'Meta: ' + event.metaKey + '\n' +
        'Shift: ' + event.shiftKey
      );
    }
  }
};

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45
    },
    events: {
        click: function(event) {
          alert(' clicked\n' +
            'Alt: ' + event.altKey + '\n' +
            'Control: ' + event.ctrlKey + '\n' +
            'Meta: ' + event.metaKey + '\n' +
            'Shift: ' + event.shiftKey
          );
        }
      }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 100,
      depth: 50,
      point: {
        events: {
          click: function() {
            alert("clicked");
          }
        }

      }
    },
  },
  series: [{
    allowPointSelect: true,
    name: 'Delivered amount',
    data: [
      ['Bananas', 8],
      ['Kiwi', 3],
      ['Mixed nuts', 1],
      ['Oranges', 6],
      ['Apples', 8],
      ['Pears', 4],
      ['Clementines', 4],
      ['Reddish (bag)', 1],
      ['Grapes (bunch)', 1]
    ],
    point: {
      events: {
        click: function(event) {
          alert(this.x + " " + this.y);
        }
      }
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px"></div>

3D Donut chart click event issue on edges of chart

1 Answers1