add custom links to series / data sections in pie chart (highcharts.js)

Question

I am simply trying to allow each data section or series of a pie chart via highcharts to be clickable, eg. Shop section should link to #shop_section I've found demos where a global link was set to every data section in a chart. But I simply would like a unique #link to be accessible via clicking one of my three data sections / series.

   series: [{
        innerSize: '30%',
        data: [
            ['Shop', 10], 
            ['Buy', 10], 
            ['Own', 10], 
        ]
    }]
});

This didn't work: (attempt)

    data: [
        {name: 'Shop', 10, url: 'http://my_site1.com'},
        {name: 'Buy', 10,  url: 'http://my_site2.com'},
        {name: 'Own', 10,  url: 'http://my_site3.com'}
    ]

Sebastian Bochan · Accepted Answer · 2014-12-12 15:01:54Z

2

Your series is incorrect, it should be:

data: [
    {name: 'Shop', y: 10, url: 'http://my_site1.com'},
    {name: 'Buy', y: 10,  url: 'http://my_site2.com'},
    {name: 'Own', y: 10,  url: 'http://my_site3.com'}
]

answered Dec 12, 2014 at 15:01

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Bochan Over a year ago

Please replicate your example as live demo, which doesnt work.

MorKadosh · Accepted Answer · 2014-12-11 06:46:57Z

1

Using plotOptions would do the work:

    plotOptions: {
        series:{
            point:{
                events:{
                    click: function(){
                        window.location.href = this.url;
                    }
                }
            }
        },
    },

By simply using a series->point->events we can speficy which events to delegate to our series points (in the case of a pie chart a point is a "slice"). On the event handler function itself, this refers to the clicked point, therefore I can directly use the custom property url you've set.

answered Dec 11, 2014 at 6:46

MorKadosh

6,0053 gold badges27 silver badges39 bronze badges

2 Comments

Lieutenant Dan Over a year ago

This looks great but how to specify which section links eg. name 'Shop' slice?

MorKadosh Over a year ago

Hey @JamesBond, please clarify what your'e trying to achieve :) I didn't fully understand. the above code would work also for sections links

Collectives™ on Stack Overflow

add custom links to series / data sections in pie chart (highcharts.js)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related