ZingChart: I need to create a responsive chart. How do I use ZingChart media rules?
You can create responsive JavaScript charts using ZingChart media rules, which allow you to specify how a chart appears at varying chart dimensions. To get started:
In the chart object, create a mediaRules
array in the objects you want media rules applied. In the below example, media rules were created in the legend
object, scaleX
object, scaleY
object, and plot
object. In each array, create an object for each breakpoint you want new chart modifications applied. In the below example, breakpoints were specified in each object with the maxWidth
attribute at 400 and 600 pixels.
Example: https://demos.zingchart.com/view/V5J6A12C
Refer to the Media Rules Tutorial for more information on responsive charting and how to create charts that can be viewed across desktop and mobile devices.
Documentation