d3 chart show multiple label in one slice on mouse hover

Question

i have following d3 pie chart

i created this using following js code

function piechart(){

var usapass = 20;
var usafail = 40;
var usasum = usapass + usafail;

var englandpass = 10;
var englandfail = 60;
var englandsum = englandpass + englandfail;



var pieChartData = [
    { 'label': 'USA', 'value' : usasum, 'color': COLOR_RED }, 
    { 'label': 'ENGLAND', 'value' : englandsum, 'color': COLOR_ORANGE }
];

nv.addGraph(function() {
    var pieChart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelThreshold(.05);

    d3.select('#nv-pie-chartmy').append('svg')
        .datum(pieChartData)
        .transition().duration(350)
        .call(pieChart);

    return pieChart;
});
}

and my HTML code

 <div id="nv-pie-chartmy" class="height-sm"></div>

currently when mouse hover on one slice it displays 'USA 60' like shown in the image. but what i want it to show something like bellow

USA Pass: 20 Fail : 40

without showing the entire count. currently showing the entire count. any idea how to display it

score 0 · Answer 1 · answered Mar 05 '19 at 10:27

First you will need to include the data you want shown in your pieChartData variable, as such:

var pieChartData = [
    { 'label': 'USA', 'value' : usasum, 'pass': usapass, 'fail': usafail, 'color': COLOR_RED }, 
    { 'label': 'ENGLAND', 'value' : englandsum, 'pass': englandpass, 'fail': englandfail, 'color': COLOR_ORANGE }
];

Then you can use the tooltipContent function when creating your chart to access and display your desired content of the tooltip, as such:

var pieChart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelThreshold(.05)
      .tooltipContent(function (label, val, nv_d) { return label + ' Pass: ' + nv_d.point.pass + ' Fail: ' + nv_d.point.fail } );

If you want a more sophisticated tooltip layout, you can include HTML in the return value of the tooltipContent function. E.g:

.tooltipContent(function (label, val, nv_d) { return '<h3>' + label + '</h3> Pass: ' + nv_d.point.pass + ' Fail: ' + nv_d.point.fail } );

Source: A combination of the two suggestion in this Stackoverflow answer

i get this error nv.models.pieChart(...).x(...).y(...).showLabels(...).labelThreshold(...).tooltipContent is not a function. — Elite user, Mar 11 '19 at 03:06

score 0 · Accepted Answer · answered Mar 11 '19 at 04:25

tooltipContent was deprecated, and tooltip was moved into it's own object.

Use chart.tooltip.contentGenerator(), and pass in a function that builds the content.

      chart.tooltip.contentGenerator(function (d) {
      var html = "<h2>"+d.value+"</h2> <ul>";

      d.series.forEach(function(elem){
        html += "<li><h3 style='color:"+elem.color+"'>"
                +elem.key+"</h3> : <b>"+elem.value+"</b></li>";
      })
      html += "</ul>"
      return html;
    })

    return chart;
});

d3 chart show multiple label in one slice on mouse hover

2 Answers2