0

I am following this example to create grouped bar chart. But the chart lacks responsiveness. I want to run it dynamically in all kinds of devices. I want to make it look something like the below chart(not same as chart above copied from an example of a responsive chart):

enter image description here

And also in above example the x-axis range is overlapped is it possible to make it tilted to so that all values are clear something like below pic so that all x axis range values are displayed. enter image description here

The responsiveness of the chart is fixed however the scale values overlap on each other and instead of overlapping I want them all to adjust and appear.

SiddP
  • 1,603
  • 2
  • 14
  • 36
  • 1
    Maybe this question is useful to you: http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive – Pablo EM Jan 20 '16 at 08:04
  • Ok I tried that but the bars then become lines and the letters in the axis range are overlapped and not distinguishable , is there any way to tilt the axis range as shown in above figure where chocolate ,vanilla and Strawberry are tilted to accommodate space in mobile view . – SiddP Jan 20 '16 at 09:27
  • Now I am able to properly display chart in a responsive manner but how to make the scale values responsive. So that they wont overlap on each other. – SiddP Jan 20 '16 at 09:43
  • Probably you can found a lot of interesting resources googleing "responsive d3.js charts"... – Pablo EM Jan 20 '16 at 13:08

0 Answers0