basic responsive chart

<!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>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

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

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var vBarConfig = {
      "type": "vbar",
      "legend": {
        "marker": {
          "cursor": "hand"
        },
        "item": {
          "cursor": "hand"
        },
        "border-color": "none",
        "align": "center",
        "vertical-align": "bottom",
        "max-items": 4,
        "overflow": "page",
        "page-on": {
          "background-color": "black",
          "border-width": 1,
          "border-color": "black"
        },
        "page-off": {
          "background-color": "#ffe6e6",
          "border-width": 1,
          "border-color": "black"
        },
        "page-status": {
          "font-color": "black",
          "font-size": 11,
          "font-family": "Georgia",
          "background-color": "#ffe6e6"
        },
        "toggle-action": "none"
      },
      "plotarea": {
        "margin": "dynamic",
        "border-top": "1px solid grey",
        "border-right": "1px solid grey"
      },
      "scale-x": {
        "auto-fit": true,
        "line-width": 1,
        "items-overlap": true,
        "item": {
          "angle": 0,
          "wrap-text": true
        }
      },
      "scale-y": {
        "ref-line": {
          "visible": true,
          "line-style": "solid",
          "items-overlap": true
        },
        "guide": {
          "line-style": "solid"
        }
      },
      "plot": {
        "value-box": {
          "text": "%vt ",
          "visible": true,
          "font-color": "black",
          "font-size": "10px",
          "decimals": 2,
          "angle": -90,
          "placement": "middle"
        },
        "animation": {
          "effect": "ANIMATION_SLIDE_BOTTOM",
          "speed": "2000"
        }
      },
      "series": [{
        "values": [5, 15, 10, 6, 4]
      }]
    };


    zingchart.render({
      id: 'myChart',
      data: vBarConfig,
      height: '100%',
      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"><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;
}

var vBarConfig = {
  "type": "vbar",
  "legend": {
    "marker": {
      "cursor": "hand"
    },
    "item": {
      "cursor": "hand"
    },
    "border-color": "none",
    "align": "center",
    "vertical-align": "bottom",
    "max-items": 4,
    "overflow": "page",
    "page-on": {
      "background-color": "black",
      "border-width": 1,
      "border-color": "black"
    },
    "page-off": {
      "background-color": "#ffe6e6",
      "border-width": 1,
      "border-color": "black"
    },
    "page-status": {
      "font-color": "black",
      "font-size": 11,
      "font-family": "Georgia",
      "background-color": "#ffe6e6"
    },
    "toggle-action": "none"
  },
  "plotarea": {
    "margin": "dynamic",
    "border-top": "1px solid grey",
    "border-right": "1px solid grey"
  },
  "scale-x": {
    "auto-fit": true,
    "line-width": 1,
    "items-overlap": true,
    "item": {
      "angle": 0,
      "wrap-text": true
    }
  },
  "scale-y": {
    "ref-line": {
      "visible": true,
      "line-style": "solid",
      "items-overlap": true
    },
    "guide": {
      "line-style": "solid"
    }
  },
  "plot": {
    "value-box": {
      "text": "%vt ",
      "visible": true,
      "font-color": "black",
      "font-size": "10px",
      "decimals": 2,
      "angle": -90,
      "placement": "middle"
    },
    "animation": {
      "effect": "ANIMATION_SLIDE_BOTTOM",
      "speed": "2000"
    }
  },
  "series": [{
    "values": [5, 15, 10, 6, 4]
  }]
};


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