Blog Help & Support Contact About Login

 Show Nav

Mobile Charts

Overview

ZingChart offers a mobile charts plugin that allows users to interact with and use touch gestures when reading JavaScript charts on mobile devices. When the plugin is included on a web page, mobile charts appear with a custom context menu that allows users to save, share, and lock/unlock chart images. Try interacting with the below chart on a mobile device.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

On x/y-axis charts (bar, line, area, scatter, bubble), crosshairs are automatically enabled and charts set to zoom appear with an accompanying scrollbar. On pie and donut charts, an interactive indicator automatically displays below or in the center of the chart. These mobile features can be customized, styled, and turned on/off, as the following sections and the Options JSON page demonstrate.

Scope

The mobile charts plugin is intended for use on web pages that will be primarily viewed on mobile devices such as tablets and phones. The plugin was built using ZingTouch, our JavaScript touch gesture library, and supports touch gestures such as tap, swipe, pinch, stretch, and drag.

We currently support mobile charting on the following chart types:

Note that with the current build, there is a limitation on the crosshairs. When the mobile charts plugin is included on a web page, it disables the crosshairs on: (1) any non-mobile charts, and (2) mobile charts where the mobile attribute is set to false in the options object. This issue will be addressed in a future build.

In the meantime, we welcome your feedback! Let us know what you think of the mobile charts plugin, and what features you would find useful in future versions. Our team is available on chat or by email at support@zingchart.com.

Setup

Get started by downloading the mobile charts plugin or accessing it through the CDN.

Download

Download the following two files, and then place the scripts in your working directory:

  • zingchart-mobile.min.js (JavaScript file that includes ZingTouch)
  • zinghcart-mobile.min.css (CSS file for context menu styling)

Next, in the document <head>, place the mobile charts plugin scripts below the main ZingChart script.

<script src="zingchart.min.js"></script>
<script src="/modules/zingchart-mobile.min.js"></script>
<link rel="stylesheet" href="/modules/zingchart-mobile.min.css">

Once added, mobile charting is automatically enabled for all charts on that page.

CDN

In the document <head>, place the JavaScript and CSS mobile charts plugin scripts below the main ZingChart script.

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://cdn.zingchart.com/modules/zingchart-mobile.min.js"></script>
<link rel="stylesheet" href="https://cdn.zingchart.com/modules/zingchart-mobile.min.css">

Once added, mobile charting is automatically enabled for all charts on that page.

Mobile Context Menu

The mobile context menu appears in the upper-right corner of the chart, and can be accessed by tapping on the menu icon. Try interacting with the below chart on a mobile device:

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

The following menu items appear by default:

  • Save Image
  • Share Image
  • Lock/Unlock Scrolling

To customize the context menu, create a contextMenu object in the options object. You can change the color of the context menu buttons, remove individual menu items, and/or change the color of the menu item font.

options: {
  contextMenu: {
    button: {
      open: {
        lineColor: 'red'
      },
      close: {
        lineColor: 'red'
      }
    },
    items: {
      image: true, //Save Image
      share: true, //Share Image
      lock: true, //Lock/Unlock Scrolling
      fontColor: 'red'
    }
  }
}

Refer to the Context Menu JSON page for a full list of objects and attributes.

Save Image

Mobile charts can be saved as a PNG image. Use the sliding scale to specify the image size. Try saving the below bubble chart onto your mobile device.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

options: {
  contextMenu: {
    items: {
      image: true,
      share: false,
      lock: false
    }
  }
}

Share Image

Mobile charts can be shared via Email, Facebook, Twitter, or LinkedIn. Try sharing the below chart through a social media platform from your mobile device. You can remove individual share items by creating a share object and specifying which menu items you want turned on/off.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

options: {
  contextMenu: {
    items: {
      share: {
        email: true,
        facebook: true,
        twitter: true,
        linkedin: true
      },
      image: false,
      lock: false
    }
  }
}

Lock/Unlock Scrolling

On mobile charts, mobile scrolling is locked by default, i.e., the disableScrolling attribute is set to true in the options object. This means that when users scroll over the page, they cannot scroll over the actual chart (because to touch the chart is to interact with it). This only becomes an issue when the chart is so large that it takes up the entire screen on a user's device. In that case, you may want to change the default mobile scrolling setting, i.e., set disableScrolling to false. Users can then scroll easily over the page. To interact with a specific chart, they would then go to that chart's context menu and manually change the lock setting. Try interacting with the below chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

options: {
  disableScrolling: false,
  contextMenu: {
    items: {
      lock: true,
      image: false,
      share: false
    }
  }
}

X/Y-Axis Charts

The plugin supports mobile charting on bar ('bar'), line ('line'), area ('area'), scatter ('scatter'), and bubble ('bubble') charts. These charts appear with mobile crosshairs and, if zooming is enabled, an accompanying scrollbar.

Note: The plugin is not currently supported on the switched-axes or 3-D versions of these charts.

Mobile Crosshairs

Tooltips appear across all ZingChart charts by default. On x/y-axis mobile charts, crosshairs appear by default as well. Try interacting with the below area chart on a mobile device to see how the default 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 automatically appear on the mobile version of that chart. 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 plugin supports mobile charting on pie ('pie') and donut ('ring') charts, which appear with a mobile indicator below or in the center of the chart.

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

Mobile Indicator

The mobile indicator appears below (on pie charts) or in the center (on donut charts) of the chart. You can tap or spin the pie. Try interacting with the below chart on a mobile device.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Intended to replace the tooltips that appear by default on standard charts, the indicator displays the series text, node percentage value, and node value of the selected pie slice. To customize the mobile indicator, create an indicator object in the options object. You can remove or style individual items using the title, npv, and/or value object(s).

Tip: You can format the node value by using a dataValueText array in the applicable series object. See the above donut chart.

options: {
  indicator: {
    title: {
      visible: true,
      //and applicable styling attributes
    },
    npv: {
      visible: true,
      decimals: 2,
      //and applicable styling attributes
    },
    value: {
      visible: true,
      //and applicable styling attributes
    }
  }
}

Refer to the Indicator JSON page for a full list of objects and attributes.

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.