Change title dynamically in ndv3 pie chart

Question

I am building a pie-chart with nvd3 and cannot figure out how to make the title dynamic or at least to run a callback when a user hovers over a slice of the pie.

This is the relevant part of my code:

nv.addGraph(function () {
    let chart : any = nv.models.pieChart()
        .x(function (d : any) {
            return d.label;
        })
        .y(function (d : any) {
            return d.value;
        })
        .showLabels(false)
        .labelThreshold(.05) //Configure the minimum slice size for labels to show up
        .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
        .donut(true) //Turn on Donut mode. Makes pie chart look tasty!
        .donutRatio(0.6) //Configure how big you want the donut hole size to be.
        .showLegend(false)
        .color(function (d : any) {
            return d.data.color;
        })
        .width(300)
        .height(300)
        .title("Hello");
    //.on("mouseover", function(d: any) { console.log(d); });

    d3.select("#chart svg")
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

    return chart;
});

The chart works exactly as intended otherwise.

This is a codepen with the chart. For some reason the color does not work but in my own site it works.

Have you seen this [question](https://stackoverflow.com/questions/16459585/how-to-add-a-title-for-a-nvd3-js-graph). It would be easy to help if you put your code on a fiddle. — shabeer90, Jan 16 '18 at 16:45
@shabeer90 that question does not help me, I can already set a static title ok, what I need to do is be able to run a function when the user hovers over a slice and from that function alter the title. — George Bora, Jan 16 '18 at 16:56

score 2 · Accepted Answer · answered Jan 16 '18 at 18:23

You can use dispatch method of NVD3 library for event subscribing and of course, you can use any native d3 methods, for example d3.select. Just add this to your code:

  chart.pie.dispatch.on('elementMouseover', function(e) {
    d3.select('.nv-pie-title').text(e.label);
  });

  chart.pie.dispatch.on('elementMouseout', function(e) {
    d3.select('.nv-pie-title').text("Hello");
  });

Check working demo in the hidden snippet below:

nv.addGraph(function() {
  let chart = nv.models.pieChart()
    .x(function(d) {
      return d.label;
    })
    .y(function(d) {
      return d.value;
    })
    .showLabels(false)
    .labelThreshold(.05) //Configure the minimum slice size for labels to show up
    .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
    .donut(true) //Turn on Donut mode. Makes pie chart look tasty!
    .donutRatio(0.6) //Configure how big you want the donut hole size to be.
    .showLegend(false)
    .color(function(d) {
      return d.data.color;
    })
    .width(300)
    .height(300)
    .title("Hello");
  //.on("mouseover", function(d: any) { console.log(d); });
  chart.pie.dispatch.on('elementMouseover', function(e) {
   d3.select('.nv-pie-title').text(e.label);
  });
  
  chart.pie.dispatch.on('elementMouseout', function(e) {
   d3.select('.nv-pie-title').text("Hello");
  });

  d3.select("#chart svg")
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

  return chart;
});


function exampleData() {
  return [{
    label: "timeout",
    value: "14.2",
    data: {
      "color": "#f00"
    }
  }, {
    label: "uncontacted",
    value: "78.8",
    data: {
      "color": "#999999"
    }
  }, {
    label: "refused",
    value: "6.9",
    data: {
      "color": "#FFFFFF"
    }
  }];
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
<div id="chart">
  <svg style="height: 300px; margin: -20px 0;"></svg>
</div>

Change title dynamically in ndv3 pie chart

1 Answers1