CODEWITHSUNDEEP
javascriptd3.js
Benjamin
Benjamin

Reputation: 721

Why are the labels on my D3 axis inconsistent (e.g. month, day)?

I'm trying to create a D3 X axis that has a time scale.

The x axis labels are appearing inconsistently:

Sat 09 Aug 10 Mon 11 Tue 12 Wed 13 Thu 14 Fri 15 Sat 16 Aug 17

I've put my code in this fiddle to illustrate: http://jsfiddle.net/vh343kmc/2/

I think this is a time formatting issue but I am not sure. Any idea as to what is going wrong?

Upvotes: 3

Views: 420

Answers (1)

mdml
mdml

Reputation: 22912

You had a good time format written, but you need to tell your xAxis to use it:

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(1)
    .tickFormat(format) // <------ add this line
    .orient("bottom");

Here's what the axis will change to. (Note that you might need to tweak how you draw the axis due to size constraints.)

updated axis

Upvotes: 2

Related Questions