Charts: Update styles per different time periods

[LevinMedia]

Line Chart

• When there are > 50 data points on the X axis, remove the dots from the lines, and make the line weight 2px

X-Axis ticks

• Limit the number of X-Axis ticks that appear at any given time per the breakpoints section of p6riRB-3jq-p2

Secondary X-Axis labels

• [*] Add additional secondary labels as required - eg:

• [*] for longer time periods, make the primary x-axis ticks months, and only use the year as a secondary label - eg: (Hide day from X axis when the time period is too long #525)

[greenafrican]

@LevinMedia with regards to:

X-Axis ticks

Thinking about this more and I'm not sure it will be possible to achieve exactly what we had planned to here. The best way to explain this is to look at an example of a day series:

If this needed to be rendered into the compact view, with max-ticks = 7, then we'd end up with fractions of a day. I think the best we can do each time we want to reduce the number of ticks is first to remove ±half of them, then remove half of those, etc. etc. I could continue to do this until the number of ticks is less than the number mentioned in your designs?

[LevinMedia]

@greenafrican That's a great example - And I think that is probably the best way to address it.

A little more insight: I was thinking about "max ticks" as an absolute maximum per screen size - meaning it's not always necessary to use the max. So in the case above, following your suggestion you could cut the number in half to end up with 5 ticks, illustrated below:

In this case the chart still begins on August 1, however the first tick is on the second, and the sub label (Aug 2018) is placed accordingly.

[greenafrican]

Seems as though there is some debate about this and that our approach is a common approach to reduce tick counts - d3/d3-array#61 (comment)

[Aljullu]

@LevinMedia

Add additional secondary labels as required

Isn't that already implemented or am I misunderstanding it?

for longer time periods, make the primary x-axis ticks months, and only use the year as a secondary label

That's being implemented in #525. Feel free to take a look at that PR. 🙂

[Aljullu]

Closing it after speaking with @LevinMedia in Slack.