Mobile charts is intended for use on web pages that will be primarily viewed on mobile devices such as tablets and phones. We support touch gestures such as tap, swipe, pinch, stretch, and drag.
We currently support mobile charting on the following chart types:
Get started by adding this code above the render method
zingchart.TOUCHZOOM = 'pinch';. In order to enable crosshairs and zooming, set the crosshair and zooming objects in the respective JSON. To enable zooming there is one extra step. Click the menu button in the top left hand corner of the chart and disable page scrolling. This will allow you to zoom into the chart using pinch. If you would like to scroll the page again, enable page scrolling via the same menu.
The code supports mobile charting on bar (
'bar'), line (
'line'), area (
'area'), scatter (
'scatter'), and bubble (
'bubble') charts. These charts appear with mobile crosshairs and an accompanying scrollbar, if crosshairs or zooming is enabled via the JSON.
Tooltips appear across all ZingChart charts by default. On x/y-axis mobile charts, crosshairs appear if you set them on in the chart JSON. Try interacting with the below area chart on a mobile device to see how the crosshairs appear. You can touch a node to activate the crosshairs, as well as drag the crosshairs across the entirety of the chart.
To customize the crosshairs, use the standard
crosshairX object in your chart object. You can use the
scaleLabel objects to format and style the labels, as well as the
guideLabel object(s) in individual
series objects for series-specific customization. See the below time-series scatter plot. Refer to the Crosshairs Tutorial for more information.
When zooming is enabled on an x/y-axis chart, a scrollbar will appear on the mobile version of that chart when zoomed. In order to turn on zooming, click the small menu button on the top left hand that is added with the mobile code. In this menu, set page scrolling to disabled and now you can pinch and zoom. See the below line chart, where
zooming attributes were added to both the
scaleY objects. Try spreading and pinching the chart on your mobile device. You'll see the scrollbar appear once you've zoomed in on a section of the chart.
Note: To have the chart zoomed in to specified scale values at chart render, you would need to add a
zoomToValues array in your scale object(s). Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.
To customize the scrollbar, use the standard
scrollY object(s) in your chart object. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for step-by-step instructions.
Note: The mobile code is not currently supported on the 3-D versions of these charts.
Got a question about how mobile charts work? We are happy to help. Email email@example.com or start a chat right here on this page for help.