Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
107
rated 0 times [  112] [ 5]  / answers: 1 / hits: 25252  / 12 Years ago, thu, july 12, 2012, 12:00:00

I'm wondering if anyone has successfully implemented a responsive design using Highcharts to make their charts look good on both mobile and desktop.



By default, Highcharts do re-scale when you resize the browser screen its just that the X-axis get cluttered by the tick mark text and bar graphs look tall and too skinny (too compressed).
To get a sense of what I mean, you can go to this page and resize the browser.



I think these issues could possibly be addressed by reducing the amount of data points say to 1/3 of the original number though I'm wondering how that would be accomplished programmatically using Highcharts's API. If that doesn't sound like a good idea I'm also interested in other thoughts or solutions people might have come up with to use Highcharts on mobile (or perhaps even different JS charting libraries where a multi-device solution might be easier to implement?).


More From » jquery

 Answers
13

The solution seems rather simple.



Just don't give the graph's a fixed width, i.e., don't define the width or set width:100% and, unlike the demo I mention, the bar chart width and accompanying bars will shrink as much as the browser width is reduced.


[#84312] Wednesday, July 11, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
raymondd

Total Points: 620
Total Questions: 112
Total Answers: 94

Location: Namibia
Member since Mon, Feb 21, 2022
2 Years ago
;