Search code examples
javascripttwitter-bootstraphighchartspopover

get serieName and category value using highcharts


I am using basic column chart from highchart component, and one feature that I need to implement is draw a popup (using popover) with information related with the selected series and selected category. In the code below you can see that I am attaching popover component to every column:

load: function(e) {  
    $(".highcharts-tracker rect").hover(function() {                            
        $(this).attr('data-content',  
                'here should be a nice call to my web api method');
    }).popover({trigger:'hover', placement:'right'}).hover(function() {

As you see above, what I have done is the creation of the popup using popover component. My question now is related with get the series name and the category for the selected series in order to call to my web API method. If you see image below, for the selected column I need to get the values (serie1, 2016).

Any ideas? JSFiddle: Column chart

Feature image


Solution

  • You can hook into the point events to detect when the mouse is over a series. At that point, you have access to the series name etc.

     plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function () {
                            $(".popover").text(
                            this.series.name);
                        }
                    }
                }
            }
        },
    

    http://jsfiddle.net/65VtA/