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.
Solution
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.
OTHER TIPS
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'));
The .tickFormat
method on the .yAxis
method doesn't update it properly. This is the work around I used:
chart.yAxisTickFormat(d3.format(',.0d'));
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.