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.

Answer 1

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")

}

Answer 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