Highcharts Stacked Percentage Column Hyperlink

Question

I have a Stacked % Column Highchart which without Hyperlinks on data sets works perfectly, however I need to link away to another page from the chart, If it was a standard column chart, I would have no issue (I have one already). But i cannot seem to work out why I'm getting an undefined error on the link.

Ive searched around for a working example but havent been able to find one matching the stacked percentage column.

I've setup a fiddle to indicate where im up to, any help appreciated.

 $(function () {
 $('#container').highcharts({
   chart: {
     type: 'column'
   },
   title: {
     text: 'Space Overview'
   },
   xAxis: {
     categories: ['a', 'b', 'c', 'd']
   },
   yAxis: {
     min: 0,
     title: {
       text: 'Total Space (%)'
     }
   },
   tooltip: {
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
     shared: true
   },
   plotOptions: {
     column: {
       stacking: 'percent'
     },
     series: {
       cursor: 'pointer',
       point: {
         events: {
           click: function() {
             location.href = this.options.url;
           }
         }
       }
     }
   },
   subtitle: {
     text: '+ Items relate to items in the dispay cabinets.',
     align: 'left',
     x: 10
   },
   series: [{
     name: 'Free',
     data: [1498, 1123, 556, 1176],
     url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
   }, {
     name: 'Used',
     data: [1234,233,23,759],
     url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
   }]
 });

http://jsfiddle.net/Mooglekins/qv8z5a2o/

Answer 1

This is a great question! I did some digging and think I've found a good solution for you.

First, I needed to update how you defined the custom value in your series. To capture certain values in events, I moved the url attribute within each data point. So now, each point has their y value and the new url value.

(Note: I used dummy URLs here since I wouldn't be able to connect to the ones you provided outside your website.)

series: [{
    name: 'Free',
    data: [
        { y: 1498, url: 'http://www.google.com' },
        { y: 1123, url: 'http://www.yahoo.com' },
        { y: 556, url: 'http://www.bing.com' },
        { y: 1176, url: 'http://www.msn.com' }
    ]
    }, {
        // second series here
    }
]

Next, I updated your events call. Now that we've moved the url attribute to each point, we can refer to that value as point.url (as you could the y value using point.y).

What I also did here is use window.open vs. window.location. This will be a better experience for your users so they don't lose sight of the chart. Keep this if you wish.

plotOptions: {
    column: {
        stacking: 'percent'
    },
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function (event) {
                    window.open(event.point.url);
                }
            }
        }
    }
}

Here's your updated fiddle with these changes: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/

I hope this helps!