How do I set up a "media query" type event that will re-render our chart when the screen size is small?

The full question:
I am a developer that works for a power company currently using ZingChart. We are trying to have our daily chart re-size from 30 days/bars down to 7days/bars on a mobile phone. This way customers can just see a weekly power usage view on their phone and scroll right to see the rest of the days of the month. How do I set up a "media query" type event that will re-render our chart when the screen size is small. We are using Bootstrap for our responsive framework. Can we have the amount of bars automatically adjust to show less bars in mobile but the desktop default would still have to show an entire month of usage/30 days.

Specific Answer that can be adapted:
My suggestion for the “media query” simulation would be to use the following in your scaleX object:

scaleX: {
   zooming: true,
   zoomTo: (window.innerWidth < 980 ? [0,6] : [0,29])
 },
 scrollX: {}

Assuming you have 30 days for each month, it will either zoom to the first 7 days of the month for screens smaller than 980px or display the full month for screens larger than 980px.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.