d3.js & nvd3.js axis and label precision formatting

Question

Using the stacked area chart as seen in this example http://nvd3.com/ghpages/stackedArea.html

Trying to format the y-axis tick labels and the tooltip labels to be integers instead of floats. Tried changing the follow code from

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

to

chart.yAxis
        .axisLabel('Users')
        .tickFormat(d3.format(',.0d'));

Precision remains unchanged (still shows values to the hundredths place). I've followed the Github Wiki to no avail https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format

Any suggestions or hints will be greatly appreciated.

Postlude

Answer 1

Looks like this isn't supported by nvd3 at the moment. See the offending line.

In addition, your format specification isn't quite right. As mentioned in the documentation, "d" ignores non-integer values. So you probably want ",.0f" instead, which means:

• ,: use commas to separate thousands.
• .0: precision of zero (the exact meaning of this depends on which type is in use).
• f: The type; in this case, Number.toFixed. This means a fixed number of digits (the precision) appear after the decimal point, and the number is rounded if necessary.

Sinful

Should other people find it useful. I've made a small tutorial on the d3 formatter here with examples: koaning.github.io/html/d3format.html – Sybil

Answer 2

this one can format label text from float to integer.

for pie chart:

chart.pie.valueFormat(d3.format(',.0d'));

for line chart:

chart.yAxisTickFormat(d3.format(',.0d'));

Apia

Answer 3

The .tickFormat method on the .yAxis method doesn't update it properly. This is the work around I used:

        chart.yAxisTickFormat(d3.format(',.0d'));

Runion

Answer 4

I have tried like this

.axisLabel('%').tickFormat(function(d) { return parseFloat(d).toFixed(1) + "%"; });

Its working for me.I am getting results with decimal points and percentage.

Propman