How to make the tooltip label whole number in nvd3 piechart

Question

This is my code:

 function graphDataAllChart(graphData) {
        $(".dataContentAllPie").empty();
nv.addGraph(function() {

  var chart = nv.models.pieChart()
                  .x(function(d) { return d.label })
                  .y(function(d) { return d.value })
                  .showLabels(true)     //Display pie labels
                  .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.35)     //Configure how big you want the donut hole size to be.
                ;

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

    return chart;
});

};

Here,when the pie chart is displayed,it is displaying the numbers in decimal format,that is it displays a value like 1564.00 What I want is to eliminate the decimal points and make it look like 1564

I have tried modifying the label as

.y(function(d) { return Math.round(d.value) })

but failed to accomplish the desired results.

Can any one help me on this?

Ranjith Siji · Answer 1 · 2016-03-28T15:57:43.637

You can use the valueFormatter property of nvd3 library. It is available in 1.8 or more.

 function graphDataAllChart(graphData) {
        $(".dataContentAllPie").empty();
nv.addGraph(function() {

  var chart = nv.models.pieChart()
                  .x(function(d) { return d.label })
                  .y(function(d) { return d.value })
                  .showLabels(true)     //Display pie labels
                  .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.35)     //Configure how big you want the donut hole size to be.
                  .tooltip.valueFormatter(d3.format('d')) // This will round the value without decimal. 
                ;

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

    return chart;
});

};

This had worked for me. Just go through this question also nvd3 tooltip decimal format

score 2 · Answer 2 · edited Jul 07 '16 at 18:58

You need to format your axis like this --

function graphDataAllChart(graphData) {
  $(".dataContentAllPie").empty();
  nv.addGraph(function() {

  var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(true)     //Display pie labels
    .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.35)     //Configure how big you want the donut hole size to be.
  ;

  chart.yAxis
    .tickFormat(d3.format(',0f'));

  chart.valueFormat(d3.format('d'));

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

    return chart;
  });
};

How to make the tooltip label whole number in nvd3 piechart

2 Answers2