CODEWITHSUNDEEP
d3.jsnvd3.js
George Bora
George Bora

Reputation: 1650

Change title dynamically in ndv3 pie chart

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.

Upvotes: 2

Views: 717

Answers (1)

Mikhail Shabrikov
Mikhail Shabrikov

Reputation: 8509

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>

Upvotes: 2

Related Questions