Menu
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?).
452
Getting started with Highcharts takes a bit of research if you are fairly new to programming in Javascript (like we were). Given the demo examples in JS Fiddle, however, you can always start with working code and go from there. Our chart is actually made up of two individual charts.
At Highcharts, we believe that good frameworks make developers’ lives easier. And we’ve found reasons to fall in love with virtually every framework out there! In support of fellow Angular, Vue and React developers across the world, we’ve developed official Highcharts wrappers for all these major frameworks, with more to come.
The container div is used to contain the chart drawn using the Highcharts library Highcharts library uses very simple configurations using json syntax. Here json represents the json data and configuration which HighChart library uses to draw a chart withing container div using highcharts () method.
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 pageand resize the browser.
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.
132
It probably depends on which types of charts that you are displaying. On mobile, if you're displaying a column chart, you might want to rotate the chart so that it becomes a bar chart.
If you're displaying a line chart, you could "scope" the data, so that you're only displaying the least amount of points needed to get the point across. As you zoom in, re-scope the data to fit the current view. This can be done using some events combined with some hand rolled js.
20
You can set the chart container div width:100% .
Then just remove the highchart width property. I resolved it for a sparkline chart. Now it is mobile responsive.
Highcharts.chart('my-sparkline-chart, {
chart: {
type: 'areaspline',
height: '70',
//width: '189', //comment width property.
spacing: [0, 0, 0, 0],
backgroundColor: "transparent"
}
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
