CODEWITHSUNDEEP
jquerytwitter-bootstraphighchartsangular2-highcharts
indra257
indra257

Reputation: 86

Highcharts: Show tooltip on legend hover

I have my Highchart as below, Is there a way to show tooltip on legend hover, just like when we hover on a slice. https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview

My tooltip code:

tooltip: {
    positioner: function(x, y){
         var center = this.chart.series[0].center;
         console.log(this, arguments);
         return { x: center[0] - x/2, y: center[1] + y/2 };
    },
    formatter: function() {
         return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 + ' %';
    }
}

Upvotes: 1

Views: 3932

Answers (3)

Mohamed Sami
Mohamed Sami

Reputation: 916

I make it actually with modal with mouse hover event, This is how you can do this, please insert this code in your chart function:

$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
    var seriesName = $(this).text();
    if (seriesName === "this_series_name") {
        $('#myModal').modal('toggle');
    }
});

Then you can make a modal div to open with hover event like this one below

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">Note</h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        your message here
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Ok
                </button>
            </div>
        </div>
    </div>
</div>

this is a demo

Upvotes: 1

stpoa
stpoa

Reputation: 5573

You can use Black Label's custom events plugin, calculate index of clicked label and show tooltip with tooltip.refresh() method.

var options = {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    labels: {
      events: {
        click () {
          const label = this
          const chart = this.chart
          const data = this.axis.series[0].data
          const { categories } = this.axis
          const i = categories.indexOf(label.value)
          if (i !== -1) chart.tooltip.refresh(data[i])
        },
      }
    }
  },
  series: [{
    minPointLength: 10,
    data: [900, 0.1],
    type: 'column'
  }]
}

var chart = Highcharts.chart('container', options)
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>

<div id="container"></div>

Upvotes: 3

Rohan Kumar
Rohan Kumar

Reputation: 40639

You have already added bootstrap in your code so use Bootstrap tooltip and add the below code in your chart onload function,

var legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
   (function(i) {
       var t=legend.allItems[i],
           content= '<b>'+ t.name +'</b>: '+ Math.round(t.percentage*100)/100 + ' %';
           jQuery($(t.legendItem.element)).tooltip({title:content,html:true});
   })(i);
}

Plnkr Demo

Upvotes: 1

Related Questions