grouped data bar 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="zc"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var cdata = {
      "type": "vbar",
      "backgroundColor": "#909090 #c9c9c9",
      "title": {
        "text": "Olympic Medals by Country",
        "fontSize": 19,
        "padding": 15,
        "color": "#000000"
      },
      "plotarea": {
        "margin": "80 40 110 40"
      },
      "scaleX": {
        "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
        "maxItems": 9999,
        "itemsOverlap": true,
        "lineWidth": 0,
        "tick": {
          "visible": false
        },
        "item": {
          "color": "#333333",
          "offsetY": 65,
          "width": "80%",
          "fontSize": 11,
          "fontWeight": 900,
          "backgroundColor": "rgba(0,0,0,0)",
          "textAlpha": 1,
          "topState": {
            "x": "+0",
            "y": "+0",
            "height": 20,
            "alpha": 1,
            "backgroundColor": "none",
            "offsetY": 35,
            "callout": true,
            "calloutWidth": 0,
            "calloutHeight": 10,
            "borderLeft": "1px solid #666666",
            "borderRight": "1px solid #666666",
            "borderBottom": "1px solid #666666"
          },
          "jsRule": "rule_scaleX_item()"
        }
      },
      "scaleY": {
        "maxItems": 9999,
        "itemsOverlap": true,
        "lineWidth": 0,
        "backgroundColor": "none",
        "minorTicks": 4,
        "minorTick": {
          "visible": true,
          "lineWidth": 1,
          "lineColor": "#333333"
        },
        "tick": {
          "lineColor": "#333333"
        },
        "guide": {
          "lineWidth": 0,
          "items": [{
              "backgroundColor": "#acb0b3"
            },
            {
              "backgroundColor": "#b1b5b8"
            }
          ]
        },
        "item": {
          "color": "#333333",
          "fontSize": 9,
          "fontWeight": 300
        }
      },
      "plot": {
        "barsOverlap": "100%",
        "barsSpaceLeft": 0.1,
        "barsSpaceRight": 0.1,
        "borderWidth": 1,
        "borderColor": "#ffffff",
        "borderAlpha": 0.8
      },
      "tooltip": {
        "shadow": true,
        "shadowColor": "#424242",
        "backgroundColor": "#212121 #424242",
        "callout": true,
        "calloutPosition": "bottom",
        "offsetY": -20,
        "placement": "node:top",
        "padding": 10,
        "fontSize": 15,
        "color": "#ffffff",
        "borderWidth": 1,
        "borderColor": "#000000",
        "text": "%scale-key-text won %node-value %plot-text medals"
      },
      "series": [{
          "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
          "alpha": 0.25,
          "max-trackers": 0,
          "jsRule": "rule_series_0()",
          "valueBox": {
            "fontSize": 11,
            "fontWeight": 600,
            "offsetY": -10,
            "jsRule": "rule_series_0_valueBox()",
          }
        },
        {
          "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
          "text": "Gold",
          "column": "1/3",
          "jsRule": "rule_series_123()",
          "zStart": 15,
          "zEnd": 35,
          "valueBox": [{
              "fontSize": 10,
              "fontWeight": 600,
              "offsetY": -10,
              "jsRule": "rule_series_123_valueBox_0()"
            },
            {
              "fontSize": 11,
              "fontWeight": 400,
              "text": "%plot-text",
              "angle": 270,
              "placement": "bottom",
              "width": 50,
              "textAlign": "right",
              "offsetY": 25
            }
          ]
        },
        {
          "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
          "text": "Silver",
          "column": "2/3",
          "jsRule": "rule_series_123()",
          "zStart": 15,
          "zEnd": 35,
          "valueBox": [{
              "fontSize": 10,
              "fontWeight": 600,
              "offsetY": -10,
              "jsRule": "rule_series_123_valueBox_0()"
            },
            {
              "fontSize": 11,
              "fontWeight": 400,
              "text": "%plot-text",
              "angle": 270,
              "placement": "bottom",
              "width": 50,
              "textAlign": "right",
              "offsetY": 25
            }
          ]
        },
        {
          "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
          "text": "Bronze",
          "column": "3/3",
          "jsRule": "rule_series_123()",
          "zStart": 15,
          "zEnd": 35,
          "valueBox": [{
              "fontSize": 10,
              "fontWeight": 600,
              "offsetY": -10,
              "jsRule": "rule_series_123_valueBox_0()"
            },
            {
              "fontSize": 11,
              "fontWeight": 400,
              "text": "%plot-text",
              "angle": 270,
              "placement": "bottom",
              "width": 50,
              "textAlign": "right",
              "offsetY": 25
            }
          ]
        }
      ]
    };

    var colorSet0 = ['#D03435', '#913891', '#5238BD'];
    var colorSet123 = [
      ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
      ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
      ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
    ];

    window.rule_series_0 = function(p) {
      return {
        backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
      };
    };

    window.rule_series_0_valueBox = function(p) {
      return {
        color: colorSet0[Math.floor(p.nodeindex / 3)]
      };
    };

    window.rule_scaleX_item = function(p) {
      return {
        color: colorSet0[Math.floor(p.index / 3)]
      };
    };

    window.rule_series_123 = function(p) {
      return {
        backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
      };
    };

    window.rule_series_123_valueBox_0 = function(p) {
      return {
        color: colorSet0[Math.floor(p.nodeindex / 3)]
      };
    }

    zingchart.render({
      id: 'zc',
      width: 900,
      height: 500,
      output: 'svg',
      data: cdata
    });
  </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="zc"></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 cdata = {
  "type": "vbar",
  "backgroundColor": "#909090 #c9c9c9",
  "title": {
    "text": "Olympic Medals by Country",
    "fontSize": 19,
    "padding": 15,
    "color": "#000000"
  },
  "plotarea": {
    "margin": "80 40 110 40"
  },
  "scaleX": {
    "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
    "maxItems": 9999,
    "itemsOverlap": true,
    "lineWidth": 0,
    "tick": {
      "visible": false
    },
    "item": {
      "color": "#333333",
      "offsetY": 65,
      "width": "80%",
      "fontSize": 11,
      "fontWeight": 900,
      "backgroundColor": "rgba(0,0,0,0)",
      "textAlpha": 1,
      "topState": {
        "x": "+0",
        "y": "+0",
        "height": 20,
        "alpha": 1,
        "backgroundColor": "none",
        "offsetY": 35,
        "callout": true,
        "calloutWidth": 0,
        "calloutHeight": 10,
        "borderLeft": "1px solid #666666",
        "borderRight": "1px solid #666666",
        "borderBottom": "1px solid #666666"
      },
      "jsRule": "rule_scaleX_item()"
    }
  },
  "scaleY": {
    "maxItems": 9999,
    "itemsOverlap": true,
    "lineWidth": 0,
    "backgroundColor": "none",
    "minorTicks": 4,
    "minorTick": {
      "visible": true,
      "lineWidth": 1,
      "lineColor": "#333333"
    },
    "tick": {
      "lineColor": "#333333"
    },
    "guide": {
      "lineWidth": 0,
      "items": [{
          "backgroundColor": "#acb0b3"
        },
        {
          "backgroundColor": "#b1b5b8"
        }
      ]
    },
    "item": {
      "color": "#333333",
      "fontSize": 9,
      "fontWeight": 300
    }
  },
  "plot": {
    "barsOverlap": "100%",
    "barsSpaceLeft": 0.1,
    "barsSpaceRight": 0.1,
    "borderWidth": 1,
    "borderColor": "#ffffff",
    "borderAlpha": 0.8
  },
  "tooltip": {
    "shadow": true,
    "shadowColor": "#424242",
    "backgroundColor": "#212121 #424242",
    "callout": true,
    "calloutPosition": "bottom",
    "offsetY": -20,
    "placement": "node:top",
    "padding": 10,
    "fontSize": 15,
    "color": "#ffffff",
    "borderWidth": 1,
    "borderColor": "#000000",
    "text": "%scale-key-text won %node-value %plot-text medals"
  },
  "series": [{
      "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
      "alpha": 0.25,
      "max-trackers": 0,
      "jsRule": "rule_series_0()",
      "valueBox": {
        "fontSize": 11,
        "fontWeight": 600,
        "offsetY": -10,
        "jsRule": "rule_series_0_valueBox()",
      }
    },
    {
      "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
      "text": "Gold",
      "column": "1/3",
      "jsRule": "rule_series_123()",
      "zStart": 15,
      "zEnd": 35,
      "valueBox": [{
          "fontSize": 10,
          "fontWeight": 600,
          "offsetY": -10,
          "jsRule": "rule_series_123_valueBox_0()"
        },
        {
          "fontSize": 11,
          "fontWeight": 400,
          "text": "%plot-text",
          "angle": 270,
          "placement": "bottom",
          "width": 50,
          "textAlign": "right",
          "offsetY": 25
        }
      ]
    },
    {
      "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
      "text": "Silver",
      "column": "2/3",
      "jsRule": "rule_series_123()",
      "zStart": 15,
      "zEnd": 35,
      "valueBox": [{
          "fontSize": 10,
          "fontWeight": 600,
          "offsetY": -10,
          "jsRule": "rule_series_123_valueBox_0()"
        },
        {
          "fontSize": 11,
          "fontWeight": 400,
          "text": "%plot-text",
          "angle": 270,
          "placement": "bottom",
          "width": 50,
          "textAlign": "right",
          "offsetY": 25
        }
      ]
    },
    {
      "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
      "text": "Bronze",
      "column": "3/3",
      "jsRule": "rule_series_123()",
      "zStart": 15,
      "zEnd": 35,
      "valueBox": [{
          "fontSize": 10,
          "fontWeight": 600,
          "offsetY": -10,
          "jsRule": "rule_series_123_valueBox_0()"
        },
        {
          "fontSize": 11,
          "fontWeight": 400,
          "text": "%plot-text",
          "angle": 270,
          "placement": "bottom",
          "width": 50,
          "textAlign": "right",
          "offsetY": 25
        }
      ]
    }
  ]
};

var colorSet0 = ['#D03435', '#913891', '#5238BD'];
var colorSet123 = [
  ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
  ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
  ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
];

window.rule_series_0 = function(p) {
  return {
    backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
  };
};

window.rule_series_0_valueBox = function(p) {
  return {
    color: colorSet0[Math.floor(p.nodeindex / 3)]
  };
};

window.rule_scaleX_item = function(p) {
  return {
    color: colorSet0[Math.floor(p.index / 3)]
  };
};

window.rule_series_123 = function(p) {
  return {
    backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
  };
};

window.rule_series_123_valueBox_0 = function(p) {
  return {
    color: colorSet0[Math.floor(p.nodeindex / 3)]
  };
}

zingchart.render({
  id: 'zc',
  width: 900,
  height: 500,
  output: 'svg',
  data: cdata
});