Olympic Medals Bar Chart

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/RFG21H8V

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background-color: #909090;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

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


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

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

    let colorSet0 = ['#D03435', '#913891', '#5238BD'];
    let 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: 'myChart',
      width: '100%',
      height: '100%',
      output: 'svg',
      data: chartConfig,
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

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

let colorSet0 = ['#D03435', '#913891', '#5238BD'];
let 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: 'myChart',
  width: '100%',
  height: '100%',
  output: 'svg',
  data: chartConfig,
});

.zc-body { background-color: #909090; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Dashboard Template with Interactive Map 65/270 Largest Employer Pictogram Chart

Olympic Medals Bar Chart

Related Documentation: