1

I have data in this format:

[{"EndDate":"2012","Value":26473660},
 {"EndDate":"2013","Value":54296732},
 {"EndDate":"2014","Value":64063400},
 {"EndDate":"2015","Value":81812464},
 {"EndDate":"2016","Value":86899274}]

And I have managed to successfully render a bar chart. However, The Y-Axis Values are showing just "000" up and down the scale.

Here is the relevant code parts for the y axis.

var y = d3.scale.linear()
        .range([height, 0]);

....

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

....

y.domain([0, d3.max(dataset, function(d) { return d.Value; })]);

....

        svg.append("g") //Y AXIS ENTER
        .attr("class", "y axis")
        .call(yAxis)
    .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Value in £");

I've looked into d3.ticks/d3.tickFormat functions on bostocks website but not following what is actually going on. Essentially, I'd like to display a short hand way for displaying Millions: 0M, 10M, 20M, 30M.. for a simple solution.

Apologies if a duplicate. It probably is but can't seem to find the solution that applies to my style of dataset :/

Thanks in Advance.

Stu
  • 67
  • 6

1 Answers1

2

Add .tickFormat('.0s') to your yAxis definition.

See:

Format Y axis values, original figures in millions, only want to show first three digits

D3: Formatting tick value. To show B (Billion) instead of G (Giga)

anbnyc
  • 911
  • 6
  • 13