adobe stackoverflow

<!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 myConfig = {
      type: "bar",
      backgroundColor: "#1D3557",
      plotarea: {
        adjustLayout: 1,
        margin: 'dynamic',
      },
      plot: {
        "rules": [{
            "rule": "%i==0",
            "background-color": "#ACD373",
            "placement": "in"
          },
          {
            "rule": "%i==1",
            "background-color": "#B7B7B7",
            "placement": "in"
          },
          {
            "rule": "%i==2",
            "background-color": "#FF6E5B",
            "placement": "in"
          },
          {
            "rule": "%i==3",
            "background-color": "#6DCFF6",
            "placement": "in"
          },
          {
            "rule": "%i==4",
            "background-color": "#F9AD81",
            "placement": "in"
          },
          {
            "rule": "%i==5",
            "background-color": "#898989",
            "placement": "in"
          }
        ],
        valueBox: {
          fontColor: "#fff",
          connector: {
            lineWidth: 1
          },
          "text": "%v",
          "font-size": 20,
          "font-weight": "normal",
          "font-style": "normal"
        }
      },
      "scale-x": {
        "label": {
          "text": 'Version',
          "color": "#fff"
        },
        item: {
          color: "#fff",
        },
        "guide": {
          "line-width": 0
        },
        zooming: true,
        "values": []
      },
      "scale-y": {
        "line-color": "none",
        "item": {
          "visible": false
        },
        "tick": {
          "line-color": "none"
        },
        "guide": {
          "line-color": "#4A6B89",
          "line-width": 1,
          "line-style": "solid",
          "alpha": 1
        }
      },
      zoom: {
        preserveZoom: true,
      },
      labels: [{
        //text:"Hold SHIFT to detach<br>multiple slices",
        textAlign: "left",
        fontColor: "#fff"
      }],
      series: [{
        values: [15, 25, 35, 45, 35, 45]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      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 myConfig = {
  type: "bar",
  backgroundColor: "#1D3557",
  plotarea: {
    adjustLayout: 1,
    margin: 'dynamic',
  },
  plot: {
    "rules": [{
        "rule": "%i==0",
        "background-color": "#ACD373",
        "placement": "in"
      },
      {
        "rule": "%i==1",
        "background-color": "#B7B7B7",
        "placement": "in"
      },
      {
        "rule": "%i==2",
        "background-color": "#FF6E5B",
        "placement": "in"
      },
      {
        "rule": "%i==3",
        "background-color": "#6DCFF6",
        "placement": "in"
      },
      {
        "rule": "%i==4",
        "background-color": "#F9AD81",
        "placement": "in"
      },
      {
        "rule": "%i==5",
        "background-color": "#898989",
        "placement": "in"
      }
    ],
    valueBox: {
      fontColor: "#fff",
      connector: {
        lineWidth: 1
      },
      "text": "%v",
      "font-size": 20,
      "font-weight": "normal",
      "font-style": "normal"
    }
  },
  "scale-x": {
    "label": {
      "text": 'Version',
      "color": "#fff"
    },
    item: {
      color: "#fff",
    },
    "guide": {
      "line-width": 0
    },
    zooming: true,
    "values": []
  },
  "scale-y": {
    "line-color": "none",
    "item": {
      "visible": false
    },
    "tick": {
      "line-color": "none"
    },
    "guide": {
      "line-color": "#4A6B89",
      "line-width": 1,
      "line-style": "solid",
      "alpha": 1
    }
  },
  zoom: {
    preserveZoom: true,
  },
  labels: [{
    //text:"Hold SHIFT to detach<br>multiple slices",
    textAlign: "left",
    fontColor: "#fff"
  }],
  series: [{
    values: [15, 25, 35, 45, 35, 45]
  }]
};

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