d3.js - show large numbers on axis in abbreviated form

Question

Is there a way to abbreviate large numbers on a d3.js axis? I recall seeing a helper method online but cannot find it again. I would like to abbreviate large numbers to reduce my chart margins and make it easier to read.

i.e. 1,000,000 = 1M etc

If anyone can post a link to the d3.js helper class it will be appreciated.

What you're looking for is 'SI prefix', and have a look at [format-a-number-with-si-prefix-with-fixed-number-of-decimals](http://stackoverflow.com/questions/13828003/format-a-number-with-si-prefix-with-fixed-number-of-decimals) and [D3 formatting](https://github.com/mbostock/d3/wiki/Formatting). — havarc, Jul 11 '13 at 08:02

score 2 · Answer 1 · edited Sep 18 '17 at 09:27

2

Hi check this link: http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e. Maybe this can help you.

For the axis you can use the following.

chart.yAxis().ticks(5).tickFormat(d3.format("s"));

I used dc.js and d3.js

Hope this can help you

edited Sep 18 '17 at 09:27

Will

339
3
7

answered Sep 13 '16 at 20:11

Víctor Cortés

473
4
9

1

Don't use links. Explain what the content behind the link explains. – buhtz Sep 13 '16 at 20:35
1

OK, maybe the rules are don't use a link without explanation but your link did help. Thanks. – Patricia Dec 28 '16 at 20:56

score 2 · Answer 2 · answered Aug 14 '17 at 20:03

2

Check out this link https://bl.ocks.org/mbostock/9764126

This worked for me for d3 v4:

function make_y_gridlines() {       
        return d3.axisLeft(yScale)
               .ticks(10,"s")

}

answered Aug 14 '17 at 20:03

Farshad Javadi

419
6
7

d3.js - show large numbers on axis in abbreviated form

2 Answers2