Semi circle chart click event configuration issue

[Charlie_Hammer]

Currently i am working on a Angular requirement, which user can click on the plotted area of a semi circle chart and route to a new page inside the application.I have gone through the Highchart API and come up with an solution, but my code snitpet is not working..can any one help me with this please.

Code: Select all

this.chart = new Highcharts.Chart('container', 
    {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        height: 400,        
        plotShadow: false
      },
      title: {
        text: '98',
        style: {
          "fontSize": "48px"
        },
        align: 'center',
        verticalAlign: 'middle',
        y: 50
      },
      credits: {
        enabled: false
     },
      tooltip: {
        pointFormat: 'Test: <b>{point.percentage:.1f}%</b>',
        enabled:false
      },
      colors: ['#FF0000', '#FFA500', '#FFFF00'],
      plotOptions: {
        pie: {
          dataLabels: {
            enabled: true,
            distance: -100,
            style: {
              fontWeight: 'bold',
              color: 'white'
            }
          },
          point: {
              events: {
                click: function (e) {
                  alert("Clicked");
                }
              }
            },
          startAngle: -90,
          endAngle: 90,
          center: ['50%', '75%'],
          size: '110%'
        }
      },
      series:[
        {
           data: [
            {y: 1, name:"", id:"0"}, 
            { y: 7, name:"",  id:"1"},
            { y: 2, name:"", id:"2"}
           ],
           innerSize: '65%',
            type: 'pie',

        }
     ]
    }

  );

[rafalS]

Hi, Charlie_Hammer!

What exactly do you want to do? I prepared a jsFiddle showing how to route to another website on a point click:

Code: Select all

  point: {
        events: {
          click: function() {
            location.href = 'https://en.wikipedia.org/wiki/' + this.options.key;
          }
        }
      },

With points defined like this:

Code: Select all

  {
        y: 1,
        name: "WIKI United_States",
        id: "0",
        key: 'United_States'
      },

jsFiddle: https://jsfiddle.net/BlackLabel/jy701gzs/

Best regards!

[Charlie_Hammer]

Hi, Charlie_Hammer!

What exactly do you want to do? I prepared a jsFiddle showing how to route to another website on a point click:

Code: Select all

  point: {
        events: {
          click: function() {
            location.href = 'https://en.wikipedia.org/wiki/' + this.options.key;
          }
        }
      },

With points defined like this:

Code: Select all

  {
        y: 1,
        name: "WIKI United_States",
        id: "0",
        key: 'United_States'
      },

jsFiddle: https://jsfiddle.net/BlackLabel/jy701gzs/

Best regards!

Thank you so much...its works but i am getting an error in my VS code (I have implemented this in Angular 6)

Code: Select all

Argument of type '{ chart: { plotBackgroundColor: null; plotBorderWidth: number; height: number; plotShadow: false;...' is not assignable to parameter of type 'Options'.
  Types of property 'plotOptions' are incompatible.
    Type '{ pie: { dataLabels: { enabled: true; distance: number; style: { fontWeight: string; color: strin...' is not assignable to type 'PlotOptions'.
      Types of property 'pie' are incompatible.
        Type '{ dataLabels: { enabled: true; distance: number; style: { fontWeight: string; color: string; }; }...' is not assignable to type 'PieChart'.
          Types of property 'point' are incompatible.
            Type '{ events: { click: (e: Event) => void; }; }' is not assignable to type '{ events: PointEvents; }'.
              Types of property 'events' are incompatible.
                Type '{ click: (e: Event) => void; }' is not assignable to type 'PointEvents'.
                  Types of property 'click' are incompatible.
                    Type '(e: Event) => void' is not assignable to type '(event: Event) => boolean'.
                      Type 'void' is not assignable to type 'boolean'.

[rafalS]

Charlie_Hammer,

Are you using an official Highcharts Angular wrapper?
https://github.com/highcharts/highcharts-angular

Kind regards.

[Charlie_Hammer]

Charlie_Hammer,

Are you using an official Highcharts Angular wrapper?
https://github.com/highcharts/highcharts-angular

Kind regards.

problem resolved..I have to return a boolean within the click function....Thank you so much rafalS.....

Code: Select all

  point: {
              events: {
                click: function (e) {
                        //Some code
                       return true;
                }
             }
           }