Help Center: Mobile Charts Plugin Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-mobile.min.js"></script>
  <link rel="stylesheet" href="https://cdn.zingchart.com/modules/zingchart-mobile.min.css">

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: 'bubble',
      options: {
        mobile: true
      },
      crosshairX: {
        plotLabel: {
          text: '%node-size-value sales<br>in<br>%data-month',
          textAlign: 'center',
          textAlpha: 1,
          fontColor: '#005c99',
          fontFamily: 'Georgia',
          backgroundColor: 'white',
          alpha: 0.7,
          borderWidth: 1,
          borderColor: '#005c99',
          borderRadius: '3px',
          padding: '5%'
        },
        scaleLabel: {
          visible: false
        },
        lineColor: '#a3a3c2'
      },
      scaleX: {
        labels: ['2000', '2002', '2004', '2006', '2008', '2010', '2012', '2014', '2016'],
        item: {
          fontSize: 10
        },
        guide: {
          visible: true,
          lineColor: '#cccccc',
          lineStyle: 'solid'
        }
      },
      scaleY: {
        values: '0:80:20',
        item: {
          fontSize: 10
        },
        guide: {
          visible: true,
          lineColor: '#cccccc',
          lineStyle: 'solid'
        }
      },
      plot: {
        marker: {
          borderWidth: 1,
          borderColor: '#005c99',
          backgroundColor: '#ccebff #99d6ff',
        },
        tooltip: {
          visible: false
        },
        valueBox: {
          fontColor: '#005c99',
          fontFamily: 'Georgia',
          fontWeight: 'normal'
        }
      },
      series: [{
        values: [
          [0.5, 10, 14],
          [1.9, 11, 33],
          [2.5, 15, 35],
          [3.1, 30, 80],
          [5.5, 45, 87],
          [5.9, 74, 101],
          [6.2, 50, 15],
          [6.8, 56, 21],
          [7.1, 61, 30],
          [7.7, 71, 34]
        ],
        'data-month': ['May', 'September', 'May', 'January', 'May', 'September', 'February', 'August', 'January', 'July'],
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <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">

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

var myConfig = {
  type: 'bubble',
  options: {
    mobile: true
  },
  crosshairX: {
    plotLabel: {
      text: '%node-size-value sales<br>in<br>%data-month',
      textAlign: 'center',
      textAlpha: 1,
      fontColor: '#005c99',
      fontFamily: 'Georgia',
      backgroundColor: 'white',
      alpha: 0.7,
      borderWidth: 1,
      borderColor: '#005c99',
      borderRadius: '3px',
      padding: '5%'
    },
    scaleLabel: {
      visible: false
    },
    lineColor: '#a3a3c2'
  },
  scaleX: {
    labels: ['2000', '2002', '2004', '2006', '2008', '2010', '2012', '2014', '2016'],
    item: {
      fontSize: 10
    },
    guide: {
      visible: true,
      lineColor: '#cccccc',
      lineStyle: 'solid'
    }
  },
  scaleY: {
    values: '0:80:20',
    item: {
      fontSize: 10
    },
    guide: {
      visible: true,
      lineColor: '#cccccc',
      lineStyle: 'solid'
    }
  },
  plot: {
    marker: {
      borderWidth: 1,
      borderColor: '#005c99',
      backgroundColor: '#ccebff #99d6ff',
    },
    tooltip: {
      visible: false
    },
    valueBox: {
      fontColor: '#005c99',
      fontFamily: 'Georgia',
      fontWeight: 'normal'
    }
  },
  series: [{
    values: [
      [0.5, 10, 14],
      [1.9, 11, 33],
      [2.5, 15, 35],
      [3.1, 30, 80],
      [5.5, 45, 87],
      [5.9, 74, 101],
      [6.2, 50, 15],
      [6.8, 56, 21],
      [7.1, 61, 30],
      [7.7, 71, 34]
    ],
    'data-month': ['May', 'September', 'May', 'January', 'May', 'September', 'February', 'August', 'January', 'July'],
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: '100%'
});