Display tooltip on chart legend (Echarts)

Question

I implemented a chart with legend based on Echarts libary. What i want to develop now is tooltip for each data on chart legend. Data are prepared as array of object and each name have corresponding description which i want to show on tooltip. In other word, i want tooltip from picture below to be shown after mouse hover on legend names.

   <div class="card grid-stack-item-content cd-example" id="dashboard-header">
                            <div class="card-header container-fluid">
                                <div class="row dashboard-row">
                                    <div class="col-3 dashboard-icon-div text-center">
                                        <h1 class="dashboard-h1"><i class="fa fa-tags dashboard-logo"></i></h1>
                                    </div>
                                    <div class="col-5"> 
                                        <h4 class="card-title dashboard-card-title">{{trans('app.icd10_codes')}}</h4>
                                        <h6 class="card-subtitle text-muted">    
                                              @if (count($binnedIcds['targetIcds']['codes']) > 0)
                                                    <span class="info-box-number">
                                                      {{count($binnedIcds['targetIcds']['codes'])}}
                                                      {{trans('app.skin_disease_groups')}}
                                                   </span>
                                             @endif
                                        </h6>
                                    </div>
                                </div> 
                            </div>
                            <div class="card-body">
                               <div class="row">
                                 <div class="col-lg-12 col-md-12 col-sm-12">
                                     <div id="pie-chart" style="width:100%; min-height: 480px;"></div>
                                 </div>
                                </div>      
                            </div>

                        </div>

NewIcdTile.js

class NewIcdChart
{
  constructor(ctx, targetsLabels, othersLabel, undefLabel, targetsTooltips, othersTooltip,
    undefTooltip, nTargets, nOthers, nTotal)
  {

    this.othersColor = '#888888';
    this.undefColor = '#cccccc';

    var labels = {
      targetsLabels,
      othersLabel,
      undefLabel
    };

    var tooltips = {
      targetsTooltips,
      othersTooltip,
      undefTooltip,
    };

    var nTargetImages = nTargets.reduce((a,b) => a + b, 0);
    var nUndef = nTotal - nTargetImages - nOthers;
    var counts = {
      nTargets,
      nOthers,
      nTotal,
      nUndef, 
    };

    this.chart;
    this.hasOthers = false;
    this.hasUndef = false;
    this.drawChart(ctx, labels, tooltips, counts);
  }




drawChart(ctx, labels, tooltips, counts){



var otherValue=counts.nOthers;

var otherLabel=labels.othersLabel;

var otherTooltip=tooltips.othersTooltip;

var undefinedValue=counts.nUndef;

var undefinedLabel=labels.undefLabel;

var undefinedTooltip=tooltips.undefTooltip;

var targetValues=counts.nTargets;

var targetLabels=labels.targetsLabels;

var targetTooltip=tooltips.targetsTooltips;





var finalChartValue=[];




for(var i=0; i<targetValues.length; i++){

    for(var i=0; i<targetLabels.length; i++){

        for(var i=0; i<targetTooltip.length; i++){

            var  obj = {"value": targetValues[i], "name": targetLabels[i], "tooltip": targetTooltip[i]};
            finalChartValue.push(obj);
        }
    }
}




var otherObject={
    value: otherValue,
    name : otherLabel,
    tooltip : otherTooltip

};

var undefinedObject={
    value: undefinedValue,
    name : undefinedLabel,
    tooltip : undefinedTooltip
};


finalChartValue.unshift(otherObject, undefinedObject);

console.log("finalChartValue", finalChartValue);

var finalChartLables=[];
 finalChartValue.forEach(function(res) {
        finalChartLables.push(res.name);
});






// specify chart configuration item and data
var option = {

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}  : {c}",


    },

    legend: {
        x : 'center',
        y : 'bottom',
        padding: 1,

        formatter: function(name) { 
          var data = this.getSeries()[0].data;  
          var totalValue = data.reduce((acc, item) => { 
            acc += item.value;
            return acc;
          }, 0)
          var targetValue;
          var targetTooltip;  
          data.map(item => {
            if (item.name == name) {
              targetValue = item.value; 
              targetTooltip= item.tooltip;
            }
          })
          var p = (targetValue / totalValue * 100).toFixed(2); 
          console.log("name", name);
          return name  + ' ' + p + '%';
        },

        data:finalChartLables
    },
    toolbox: {
        show: true,
        feature: {

            dataView: { show: true, readOnly: false },
            magicType: {
                show: true,
                type: ['pie']
            },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    color: ["#f62d51", "#dddddd", "#ffbc34", "#7460ee", "#009efb", "#2f3d4a", "#90a4ae", "#55ce63"],
    calculable: true,
    series: [{
            name: 'ICD',
            type: 'pie',
            radius: [20, 180],
            center : ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100
                    },
                    labelLine: {
                        show: false,
                        formatter: "{b} :   \n ({c})",
                        fontWeight: 100
                    }

                },
                emphasis: {
                    label: {
                        show: true,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100

                    },
                    labelLine: {
                        show: true,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100

                    }
                }
            },
            data: finalChartValue
        },


    ]
};



// use configuration item and data specified to show chart
ctx.setOption(option, true), $(function() {
    function resize() {
        setTimeout(function() {
            ctx.resize()
        }, 100)
    }
    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
});
  console.log("ctx", ctx);

}

}

Answer 1

you can add a tooltip option, and add a formatter function intolegend option, that will show a tooltip on top of the legend when mouse hover. for example:

var chart1 = echarts.init(document.getElementById("chart1"));
var option = {
  tooltip: {
    show: true,
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  series: [
    {
      name: "WHATEVER",
      type: "pie",
      data: [
        { name: "A", value: 100 },
        { name: "B", value: 150 }
      ]
    }
  ],
  legend: {
    data: ["A", "B"],
    tooltip: {
      show: true,
      formatter: function (params) {
        var total = 0,
          cur_item = null;
        var _selected = chart1.getOption().legend[0].selected;
        if (_selected[params.name] === false) return; // no tooltip if legend unchecked.
        for (var i = 0; i < option.series[0].data.length; i++) {
          var item = option.series[0].data[i];
          if (_selected[item.name] !== false) total += item.value; // get total amount checked only
          if (item.name == params.name) cur_item = item;
        }
        if (!cur_item) return;
        var format = "{a} <br/>{b} : {c} ({d}%)";
        format = format.replace("{a}", option.series[0].name);
        format = format.replace("{b}", cur_item.name);
        format = format.replace("{c}", cur_item.value);
        format = format.replace(
          "{d}",
          ((cur_item.value / total) * 100).toFixed(2)
        );
        return format;
      }
    }
  }
};
chart1.setOption(option);

Codepen