CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Benz
Benz

Reputation: 140

NVD3: Weird Behavior When Using Date as X-Axis Ticks

I'm building a line chart that should show dates on the x-axis. The graph is working fine except the date ticks are a bit messed up. It skips a date! I've replicated the issue here: https://jsfiddle.net/Tanakrit/k0vr99fd/

In the above example, you can see that there are only 7 ticks on x-axis when it should have 8. Printed them out in tickFormat, I've learned that there appears to be two Mar 25th, thus that's why it's virtually showing just 7 ticks.

What throwing me off is that I'm not sure how the function in tickFormat gets its d input, because they didn't look like the x values I actually gave to the graph.

Upvotes: 1

Views: 256

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do it like this:

var data_full = data();//get all  data
var secondDate = d3.max(data_full[0].values, function(d){ return new Date(d.x)});//get the max date
var firstDate = d3.min(data_full[0].values, function(d){return new Date(d.x)}); get min date
var between = [];
//get all dates between max and min date
while (firstDate <= secondDate) {
    between.push(new Date(firstDate));
    firstDate.setDate(firstDate.getDate() + 1);
}
chart.xAxis
    .axisLabel('Time (days)')
    .rotateLabels(-55)
        .tickValues(between)//set all dates manually with tickValues.
    .tickFormat(function(d) {
        return d3.time.format('%b %d')(new Date(d));
    })
    ;

working code here

Upvotes: 1

Related Questions