Making Highcharts.js charts look good on mobile and desktop

Question

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?).

Answer 1

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.

Answer 2

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.

Answer 3

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"
        }
...