I am having trouble figuring out how to display multiple date ranges, stacked on the same graph.

screenshot of 3 weeks on graph

I'm using c3js which has proven great so far, and relatively easy to get it to do what I want.

The screenshot shows the 3 previous weeks, and the date ranges are displayed on the tooltip, with their totals. However c3js by default will only display one x axis tick, and so overwrites each until the last remains - in this case 17 Oct to 23 Oct.

I'm not too keen on the idea of displaying several dates on the x axis anyway (there's no limit on the number of ranges that can be stacked), so I'm thinking about removing the x axis ticks all together and hacking the tooltip to display the actual dates you are hovering over instead of the range. However, this has drawbacks as the system has the ability to take screenshots of the graph for sharing, and the tooltip isn't visible on the screenshots.

Is there a standard display for this kind of graph? Or any ideas? If it was my choice I would keep it linear - as time usually is - but I've been asked specifically to stack it.

  • $\begingroup$ Are you asking about how to get c3js to do this, or about how such data are best displayed generally? $\endgroup$ Nov 6, 2014 at 15:02

1 Answer 1


I'm not familiar with c3js, but it seems a starting point is to add another variable to your data which is just the day of the week, and then use that as the X variable.

For the general question, I think your approach is fine and is common. An alternative view that can show different kinds of trends for such data is a cycle plot. See Introduction to Cycle Plots by Naomi Robbins.

enter image description here

  • $\begingroup$ Wow, thankyou! I hadn't considered something like this. Users can currently pick any date ranges, which could include 30 days, 4 days, 10 days etc. This has made me realise I should probably restrict it to logical patterns. $\endgroup$
    – daviestar
    Nov 6, 2014 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.