CODEWITHSUNDEEP
javascriptd3.jscharts
maliRudolf
maliRudolf

Reputation: 95

Custom D3 `tickValue` on x axis -- horizontal bar chart

I am trying to create custom tick values on X axis.

Chart is generated from data.csv file. There are 144 data points. Each data value represent 10 minutes cycle, so first tick should appear on 6th tick representing 1 hour.

If I use .domain([new Date('2014-03-08T12:00:00'), new Date('2014-03-9T00:00:00')]) for example, I will get X axis right, but my chart would be gone.

I can't use tickValues([]) in this case either.

What I should see on X axis is something like this 00:00 AM...(6 tick values)...1:00 AM...(6 tick values)...2:00 AM etc. Or it could be 00:00 AM...(12 tick values)...2:00 AM...(12 tick values)...3:00 AM etc. Just to be able to customize it.

Not sure if this is even possible. I tried following this simple example http://bl.ocks.org/phoebebright/3059392, but again, I get X axis right, but my chart is gone.

This would be the code: https://plnkr.co/edit/kc4E43Bgo4bNMB9hKX2j?p=preview

Thank you in advance!

Upvotes: 1

Views: 291

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

Since your data doesn't contain actual date values, this is my solution:

You want to show one tick out of 6, since each tick represents 10 minutes and you want to show only the "hourly" tick. So, define the tick values using your x scale domain:

.tickValues(d3.range(x.domain()[0], x.domain()[1]).filter(function(d) {
    return d % 6 === 0;
}))

And then, format the ticks to add a :00 to each one:

.tickFormat(function(d) {
    return d/6 + ":00";
});

Here is your updated plunker: https://plnkr.co/edit/8EOGt8UvYq1J8qpIdArN?p=preview

Edit: As discussed in the comments, here is the solution with "am" and "pm": https://plnkr.co/edit/OvtVlgT4I6Y19hgoMKIK?p=preview

Upvotes: 1

Related Questions