[json] graphset > zoom

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <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"];
    let chartConfig = {
      type: 'line',
      subtitle: {
        text: 'click, drag, and zoom into the chart'
      },
      scaleX: {
        zooming: true //sets zooming along scaleX
      },
      scaleY: {
        zooming: true //sets zooming along scaleY
      },
      zoom: { //controls styling and some functionality of zooming
        backgroundColor: '#1e7bd3',
        borderColor: '#181818',
        borderStyle: 'dashed',
        borderWidth: 1,

        mediaRules: [{
          maxWidth: 400,
          backgroundColor: 'red'
        }]
      },
      series: [{
          values: [182, 155, 161, 155, 193, 167, 177, 228, 180, 168, 218, 131, 212, 184, 163, 147, 208, 136, 228, 188, 191, 227, 135, 134, 128, 173, 219, 207, 173, 159]
        },
        {
          values: [243, 189, 213, 190, 267, 226, 245, 264, 220, 254, 190, 205, 207, 192, 224, 247, 275, 260, 267, 186, 223, 249, 244, 206, 276, 223, 270, 224, 261, 183]
        },
        {
          values: [158, 227, 190, 213, 176, 185, 212, 219, 208, 193, 172, 177, 245, 199, 145, 170, 164, 197, 186, 170, 212, 236, 196, 247, 226, 156, 228, 157, 201, 199]
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      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/zingchart.min.js"></script>
</head>

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

</html>

let chartConfig = {
  type: 'line',
  subtitle: {
    text: 'click, drag, and zoom into the chart'
  },
  scaleX: {
    zooming: true //sets zooming along scaleX
  },
  scaleY: {
    zooming: true //sets zooming along scaleY
  },
  zoom: { //controls styling and some functionality of zooming
    backgroundColor: '#1e7bd3',
    borderColor: '#181818',
    borderStyle: 'dashed',
    borderWidth: 1,

    mediaRules: [{
      maxWidth: 400,
      backgroundColor: 'red'
    }]
  },
  series: [{
      values: [182, 155, 161, 155, 193, 167, 177, 228, 180, 168, 218, 131, 212, 184, 163, 147, 208, 136, 228, 188, 191, 227, 135, 134, 128, 173, 219, 207, 173, 159]
    },
    {
      values: [243, 189, 213, 190, 267, 226, 245, 264, 220, 254, 190, 205, 207, 192, 224, 247, 275, 260, 267, 186, 223, 249, 244, 206, 276, 223, 270, 224, 261, 183]
    },
    {
      values: [158, 227, 190, 213, 176, 185, 212, 219, 208, 193, 172, 177, 245, 199, 145, 170, 164, 197, 186, 170, 212, 236, 196, 247, 226, 156, 228, 157, 201, 199]
    }
  ]
};

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