Led bars

<!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"];
    var myConfig = {
      "graphset": [{
        "type": "bar",
        "backgroundColor": "#333 #000",
        "plot": {
          "alpha": 0,
          "mode": "normal",
          "hover-state": {
            "visible": false
          }
        },
        "scale-x": {
          "values": ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"],
          "line-width": 1,
          "line-color": "#fff",
          "item": {
            "color": "#fff"
          },
          "guide": {
            "visible": false
          },
          "tick": {
            "line-width": 1,
            "line-color": "#000"
          }
        },
        "scale-y": {
          "line-width": 0,
          "item": {
            "color": "#fff"
          },
          "tick": {
            "visible": false
          },
          "guide": {
            "line-width": 0,
            "items": [{
                "backgroundColor": "#ccc #ddd",
                "alpha": 0.1
              },
              {
                "backgroundColor": "#888 #999",
                "alpha": 0.1
              }
            ]
          }
        },
        "series": [{
            "values": [10, 6, 27, 16],
            "backgroundColor": "#8AFE00 #50A701"
          },
          {
            "values": [15, 22, 12, 8],
            "backgroundColor": "#FF72CF #DC3CA9"
          },
          {
            "values": [7, 11, 4, 23],
            "backgroundColor": "#FF9C00 #FF6300"
          },
          {
            "values": [16, 31, 8, 26],
            "backgroundColor": "#B230FD #8204BE"
          }
        ]
      }]
    };

    zingchart.complete = function(params) {

      var shapes = [];

      var charttype = zingchart.exec(params.id, 'getcharttype');

      if (charttype != 'vbar') {
        return;
      }

      var render = zingchart.exec(params.id, 'getrender');

      var plots = zingchart.exec(params.id, 'getplotlength');
      for (var p = 0; p < plots; p++) {
        var nodes = zingchart.exec(params.id, 'getnodelength', {
          plotindex: p
        });

        var plotinfo = zingchart.exec(params.id, 'getobjectinfo', {
          object: 'plot',
          plotindex: p
        });

        for (var n = 0; n < nodes; n++) {

          var info = zingchart.exec(params.id, 'getobjectinfo', {
            object: 'node',
            plotindex: p,
            nodeindex: n
          });

          var ledheight = 5,
            leds = info.height / (ledheight + 3);
          for (var i = 0; i < leds; i++) {
            shapes.push({
              x: info.x + 10,
              y: info.y + info.height - (i + 1) * (ledheight + 3),
              type: "rect",
              flat: true,
              width: info.width,
              height: ledheight,
              borderRadius: 3,
              backgroundColor: plotinfo.backgroundColor1 + ' ' + plotinfo.backgroundColor2,
              fillAngle: 90,
              alpha: 1
            });
          }

        }
      }

      zingchart.exec(params.id, 'addobject', {
        type: 'shape',
        data: shapes
      });

    }

    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/zingchart.min.js"></script>
</head>

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

</html>

var myConfig = {
  "graphset": [{
    "type": "bar",
    "backgroundColor": "#333 #000",
    "plot": {
      "alpha": 0,
      "mode": "normal",
      "hover-state": {
        "visible": false
      }
    },
    "scale-x": {
      "values": ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"],
      "line-width": 1,
      "line-color": "#fff",
      "item": {
        "color": "#fff"
      },
      "guide": {
        "visible": false
      },
      "tick": {
        "line-width": 1,
        "line-color": "#000"
      }
    },
    "scale-y": {
      "line-width": 0,
      "item": {
        "color": "#fff"
      },
      "tick": {
        "visible": false
      },
      "guide": {
        "line-width": 0,
        "items": [{
            "backgroundColor": "#ccc #ddd",
            "alpha": 0.1
          },
          {
            "backgroundColor": "#888 #999",
            "alpha": 0.1
          }
        ]
      }
    },
    "series": [{
        "values": [10, 6, 27, 16],
        "backgroundColor": "#8AFE00 #50A701"
      },
      {
        "values": [15, 22, 12, 8],
        "backgroundColor": "#FF72CF #DC3CA9"
      },
      {
        "values": [7, 11, 4, 23],
        "backgroundColor": "#FF9C00 #FF6300"
      },
      {
        "values": [16, 31, 8, 26],
        "backgroundColor": "#B230FD #8204BE"
      }
    ]
  }]
};

zingchart.complete = function(params) {

  var shapes = [];

  var charttype = zingchart.exec(params.id, 'getcharttype');

  if (charttype != 'vbar') {
    return;
  }

  var render = zingchart.exec(params.id, 'getrender');

  var plots = zingchart.exec(params.id, 'getplotlength');
  for (var p = 0; p < plots; p++) {
    var nodes = zingchart.exec(params.id, 'getnodelength', {
      plotindex: p
    });

    var plotinfo = zingchart.exec(params.id, 'getobjectinfo', {
      object: 'plot',
      plotindex: p
    });

    for (var n = 0; n < nodes; n++) {

      var info = zingchart.exec(params.id, 'getobjectinfo', {
        object: 'node',
        plotindex: p,
        nodeindex: n
      });

      var ledheight = 5,
        leds = info.height / (ledheight + 3);
      for (var i = 0; i < leds; i++) {
        shapes.push({
          x: info.x + 10,
          y: info.y + info.height - (i + 1) * (ledheight + 3),
          type: "rect",
          flat: true,
          width: info.width,
          height: ledheight,
          borderRadius: 3,
          backgroundColor: plotinfo.backgroundColor1 + ' ' + plotinfo.backgroundColor2,
          fillAngle: 90,
          alpha: 1
        });
      }

    }
  }

  zingchart.exec(params.id, 'addobject', {
    type: 'shape',
    data: shapes
  });

}

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