CODEWITHSUNDEEP
highcharts
Gabriel
Gabriel

Reputation: 211

Highcharts - Mobile Device Formatting issues

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?

Upvotes: 0

Views: 694

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

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.

Upvotes: 0

Related Questions