Variwide 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 {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

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

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

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let countryData = [
      ['Norway', 50.2, 335504],
      ['Denmark', 42, 277339],
      ['Belgium', 39.2, 421611],
      ['Sweden', 38, 462057],
      ['France', 35.6, 2228857],
      ['Netherlands', 34.3, 702641],
      ['Finland', 33.2, 215615],
      ['Germany', 33.0, 3144050],
      ['Austria', 32.7, 349344],
      ['Ireland', 30.4, 275567],
      ['Italy', 27.8, 1672438],
      ['United Kingdom', 26.7, 2366911],
      ['Spain', 21.3, 1113851],
      ['Greece', 14.2, 175887],
      ['Portugal', 13.7, 184933],
      ['Czech Republic', 10.2, 176564],
      ['Poland', 8.6, 424269],
      ['Romania', 5.5, 169578],
    ]

    let myConfig = {
      type: 'variwide',
      globals: {
        fontFamily: 'Lucida Sans Unicode',
      },
      title: {
        text: 'Labor costs in Europe, 2016',
        adjustLayout: true,
      },
      options: {
        data: countryData
      },
      plot: {
        valueBox: {
          text: '\u20AC%data-value',
          color: '#000',
          overlap: false,
        },
        tooltipText: "<span style='font-size:17px;color:%color'><b>%plot-text</b></span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
      },
      plotarea: {
        margin: 'dynamic',
      },
      scaleX: {
        label: {
          text: 'Column widths are proportional to GDP',
          bold: false,
        },
        item: {
          color: '#000',
          fontSize: 10,
          angle: 330,
        },
      },
      scaleY: {
        guide: {
          lineStyle: 'solid',
        },
      },
      source: {
        text: 'Source: Eurostat',
        adjustLayout: true,
      },
      tooltip: {
        padding: '10px',
        fontSize: '12px',
        backgroundColor: '#fff',
        alpha: 0.9,
        color: '#000',
        align: 'left',
        borderRadius: '7px',
        borderWidth: '2px',
        offsetY: 5,
        shadow: true,
        shadowDistance: 2,
        borderColor: '%color-1',
        placement: 'node:top',
        callout: true,
        text: "<span style='font-size:17px;color:%color;font-weight:bold;'>\u220e %plot-text</span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
      },
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '400px',
      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" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.zc-ref {
  display: none;
}

let countryData = [
  ['Norway', 50.2, 335504],
  ['Denmark', 42, 277339],
  ['Belgium', 39.2, 421611],
  ['Sweden', 38, 462057],
  ['France', 35.6, 2228857],
  ['Netherlands', 34.3, 702641],
  ['Finland', 33.2, 215615],
  ['Germany', 33.0, 3144050],
  ['Austria', 32.7, 349344],
  ['Ireland', 30.4, 275567],
  ['Italy', 27.8, 1672438],
  ['United Kingdom', 26.7, 2366911],
  ['Spain', 21.3, 1113851],
  ['Greece', 14.2, 175887],
  ['Portugal', 13.7, 184933],
  ['Czech Republic', 10.2, 176564],
  ['Poland', 8.6, 424269],
  ['Romania', 5.5, 169578],
]

let myConfig = {
  type: 'variwide',
  globals: {
    fontFamily: 'Lucida Sans Unicode',
  },
  title: {
    text: 'Labor costs in Europe, 2016',
    adjustLayout: true,
  },
  options: {
    data: countryData
  },
  plot: {
    valueBox: {
      text: '\u20AC%data-value',
      color: '#000',
      overlap: false,
    },
    tooltipText: "<span style='font-size:17px;color:%color'><b>%plot-text</b></span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
  },
  plotarea: {
    margin: 'dynamic',
  },
  scaleX: {
    label: {
      text: 'Column widths are proportional to GDP',
      bold: false,
    },
    item: {
      color: '#000',
      fontSize: 10,
      angle: 330,
    },
  },
  scaleY: {
    guide: {
      lineStyle: 'solid',
    },
  },
  source: {
    text: 'Source: Eurostat',
    adjustLayout: true,
  },
  tooltip: {
    padding: '10px',
    fontSize: '12px',
    backgroundColor: '#fff',
    alpha: 0.9,
    color: '#000',
    align: 'left',
    borderRadius: '7px',
    borderWidth: '2px',
    offsetY: 5,
    shadow: true,
    shadowDistance: 2,
    borderColor: '%color-1',
    placement: 'node:top',
    callout: true,
    text: "<span style='font-size:17px;color:%color;font-weight:bold;'>\u220e %plot-text</span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
  },
};

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