Show Nav

Mobile Charts

Overview

ZingChart offers a mobile charts that allows users to interact with and use touch gestures when reading JavaScript charts on mobile devices. Try interacting with the below chart on a mobile device.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Scope

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:

Setup

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.

X/Y-Axis Charts

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.

Mobile Crosshairs

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

To customize the crosshairs, use the standard crosshairX object in your chart object. You can use the plotLabel and 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Mobile Zooming/Scrollbar

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 scaleX and 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 zoomTo or zoomToValues array in your scale object(s). Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

To customize the scrollbar, use the standard scrollX and/or scrollY object(s) in your chart object. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for step-by-step instructions.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Pie/Donut Charts

The mobile code supports mobile charting on pie ('pie') and donut ('ring') charts.

Note: The mobile code is not currently supported on the 3-D versions of these charts.

Summary

Got a question about how mobile charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.