i m using the Discrete Bar chart (NVD3 Library) to display chart in my site. while showing graph everything is fine, but my problem is that how to change the decimal values to integers. values that are showing in y-axis displaying integer values. although which array i used to display values having integer values. js code which i used are below

     nv.addGraph(function() {  
     var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(true)
    .tooltips(false)
    .showValues(true)
    .transitionDuration(250);
    chart.xAxis.axisLabel("<?php echo $configureGrid['x_axis']['legend']; ?>");
    chart.yAxis.axisLabel("<?php echo $configureGrid['y_axis']['legend']; ?>");
    d3.select('#issue_by_time svg')
    .datum(historicalBarChart)
    .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
    });
    });

i m using the Discrete Bar chart (NVD3 Library) to display chart in my site. while showing graph everything is fine, but my problem is that how to change the decimal values to integers. values that are showing in y-axis displaying integer values. although which array i used to display values having integer values. js code which i used are below

     nv.addGraph(function() {  
     var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(true)
    .tooltips(false)
    .showValues(true)
    .transitionDuration(250);
    chart.xAxis.axisLabel("<?php echo $configureGrid['x_axis']['legend']; ?>");
    chart.yAxis.axisLabel("<?php echo $configureGrid['y_axis']['legend']; ?>");
    d3.select('#issue_by_time svg')
    .datum(historicalBarChart)
    .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
    });
    });

• javascript
• nvd3.js

4 Answers 4

use this,

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

to convert decimals value into integer for y-axis

chart.xAxis.tickFormat(d3.format(',f'));

to convert decimals value into integer for x-axis

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

to convert decimals value into integer, that takes input by graph

chart.valueFormat(d3.format('d')); this shows the exact values as in the data table (it may be integer or float)

to show the exact vale on showValue option you can use .valueFormat(d3.format('.0'));

Further to answer by @moaz-ateeq, in angular-nvd3 this would look like

yAxis: {
  tickFormat: function(d){ return d3.format(',f')(d) }
}

You can't do this directly in NVD3, but by selecting the text elements manually and changing the text, you can. The following code, run after the chart has been generated, will take care of that.

d3.selectAll(".nv-y.nv-axis")
  .selectAll("text[text-anchor=end]")
  .text(function() { return Math.round(d3.select(this).text()); });