Highcharts - Mobile Device Formatting issues

Question

I've gotten my chart to work great for web, but having some formatting issues on mobile.

First, what is the correct way to format the height and width so the chart takes up full screen area without having to scroll page? I've tried using percentages of 100% on the div container for the chart, but it doesn't work correctly.

Second, I have my xAxis tickInterval set to 86400000 since my data returns one value for each day. I don't have this issue on web but on mobile -- because of the screen size -- the labels on the xAxis overlap. Is there a way to control this? Can I format something so on mobile so the label only appears on every set number of lines?

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-04-17T08:52:54

In mobile device you dan check width and then set appropriate widht for chart in

chart:{
   width: variableWithWidth
}

About ticks, you can use tickPositioner which allows to define dynamic ticks positions http://api.highcharts.com/highstock#xAxis.tickPositioner. So inside funcion you can prepare creating ticks for chart, but if you should check width (for mobile i.e <768px) and then set smaller range between ticks.

Highcharts - Mobile Device Formatting issues

1 Answers