CODEWITHSUNDEEP
javascripthighchartslabeltooltipaxis-labels
Vladimir Despotovic
Vladimir Despotovic

Reputation: 3498

How to put label tooltip in highcharts.js

Just like there are tooltips on individual points on the chart, for example in a line chart, I would like to have some tooltip also on hovering over the label. What would be the easiest way to do this?

Upvotes: 0

Views: 481

Answers (2)

Vladimir Despotovic
Vladimir Despotovic

Reputation: 3498

So far I found two options. First would be kind of external, and it is called tooltipsy. Other one is by using the custom-events highcharts plugin. Second one is native to highcharts, I think this is the correct way to go.

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39079

Please refer to the below example - By adding mouseover and mouseout events to an element, you can call build-in Highcharts tooltip:

chart: {
  ...,
  events: {
    load: function() {
      var chart = this,
        xAxis = chart.xAxis[0],
        halfTooltipWidth,
        posX,
        posY;

      for (var key in xAxis.ticks) {
        (function(label) {
          label
            .on('mouseover', function(e) {
              chart.tooltip.refresh({
                series: chart.series[0],
                getLabelConfig: function() {}
              });

              halfTooltipWidth = chart.tooltip.label.width / 2;
              posX = label.xy.x - halfTooltipWidth;
              posY = label.xy.y;

              chart.tooltip.move(posX, posY, posX + halfTooltipWidth, posY - 10);
            })
            .on('mouseout', function(e) {
              chart.tooltip.hide();
            });
        })(xAxis.ticks[key].label)
      }

    }
  }
},
tooltip: {
  headerFormat: '',
  formatter: function() {
    if (this.y) {
      return 'Point'
    }

    return 'Custom tooltip'
  }
}

Live demo: http://jsfiddle.net/BlackLabel/2jr0xdcw/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Tooltip

Upvotes: 1

Related Questions