Adding tooltip to legend in highcharts

问题

I am trying to add a tooltip to the legend in highcharts. I am using a pie chart. Using angular js framework. The legend code is as below

legend: {
  useHTML: true,
  layout: 'vertical',
  align: 'left',
  itemMarginTop: 10,
  itemMarginBottom: 15,
  title: {
    style: {
      fontSize: "14px",
      fontWeight: "600",
      color: "#404040"
    }
  },
  itemStyle: {
    fontWeight: 'normal',
    color: '#404040',
    fontSize: '14px'
  },
  //x  : 70,
  //y:  110,
  labelFormatter: function() {

    return ` <md-icon>
                  <md-tooltip  md-direction="top">Hello</md-tooltip>
                 <i class="material-icons help_icon">info_outline</i>
                </md-icon>`
  }



},

I do not get the expected results. it just displays the letter H and no icon. If i use a standalone icon like

<i class="material-icons help_icon">info_outline</i>

It just displays the icon. But I am unable to add any tooltip. I searched online and found a solution using the jquery UI plugin. Is there any other way without the plugin and using the angular material icons? Please suggest.

Ps: I have also tried with single quotes / double quotes instead of inverted ticks.

回答1:

Unfortunately, tooltip in a legend is not supported. However, you can create it using Highcharts.SVGRenderer. Check code and demo posted below.

Code:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend,
          legendItems = legend.allItems,
          group,
          rectElem,
          textElem,
          box,
          i;

        group = chart.renderer.g('legend-tooltip').attr({
          transform: 'translate(-9999, -9999)',
          zIndex: 99
        }).add();

        textElem = chart.renderer.text().attr({
          class: 'legend-tooltip-text',
          zIndex: 7
        }).add(group);

        rectElem = chart.renderer.rect().attr({
          'class': 'legend-tooltip',
          'stroke-width': 1,
          'stroke': '#c5c5c5',
          'fill': 'rgba(245, 245, 245, 0.95)',
        }).add(group);

        for (i = 0; i < legendItems.length; i++) {
          (function(i) {
            var item = legend.allItems[i].legendItem.parentGroup;

            item.on('mouseover', function(e) {
              // Define legend-tooltip text
              var str = chart.series[i].userOptions.fullName;
              textElem.element.innerHTML = str;

              // Adjust rect size to text
              box = textElem.getBBox()

              rectElem.attr({
                x: box.x - 8,
                y: box.y - 5,
                width: box.width + 15,
                height: box.height + 10
              });

              // Show tooltip
              group.attr({
                transform: `translate(${e.clientX + 7}, ${e.clientY + 7})`
              })

            }).on('mouseout', function(e) {
              // Hide tooltip
              group.attr({
                transform: 'translate(-9999,-9999)'
              })
            });
          })(i);
        }
      }
    }
  },
  series: [{
    data: [10, 12, 5],
    fullName: 'Series 1 tooltip'
  }, {
    data: [6, 10, 7],
    fullName: 'Series 2 tooltip'
  }]
});

Demo:

https://jsfiddle.net/BlackLabel/3cbpe0mn/

API reference:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on

来源：https://stackoverflow.com/questions/54683867/adding-tooltip-to-legend-in-highcharts

标签

angularjs

Highcharts