change scale on button

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script nonce="undefined">
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
  </script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }

    #change {
      padding: 10px 10px;
      margin-left: 20px;
      margin-top: 30px;
      background-color: #72b352;
      color: white;
      font-family: arial;
      font-size: 13px;
      font-weight: bold;
      border: 1px solid #4b8f29;
      border-radius: 4px;
    }

    #change:hover {
      background-color: #8bd865;
    }

    button:focus {
      outline: 0;
    }
  </style>
</head>

<body>
  <button id="change">Change scale</button>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: 'line',
      scaleY: {
        maxValue: 100,
        minValue: -10,
      },
      series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85]
      }]
    };

    document.getElementById("change").addEventListener("click", function() {
      zingchart.exec('myChart', 'setdata', {
        'data': {
          type: 'line',
          scaleY: {
            maxValue: 220,
            minValue: -130,
          },
          series: [{
            values: [35, 42, 67, 89, 25, 34, 67, 85]
          }]
        }
      });
    });

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 500,
      width: 600
    });
  </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>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
  </script>
</head>

<body>
  <button id="change">Change scale</button>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

#change {
  padding: 10px 10px;
  margin-left: 20px;
  margin-top: 30px;
  background-color: #72b352;
  color: white;
  font-family: arial;
  font-size: 13px;
  font-weight: bold;
  border: 1px solid #4b8f29;
  border-radius: 4px;
}

#change:hover {
  background-color: #8bd865;
}

button:focus {
  outline: 0;
}

var myConfig = {
  type: 'line',
  scaleY: {
    maxValue: 100,
    minValue: -10,
  },
  series: [{
    values: [35, 42, 67, 89, 25, 34, 67, 85]
  }]
};

document.getElementById("change").addEventListener("click", function() {
  zingchart.exec('myChart', 'setdata', {
    'data': {
      type: 'line',
      scaleY: {
        maxValue: 220,
        minValue: -130,
      },
      series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85]
      }]
    }
  });
});

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 500,
  width: 600
});