html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // Create and return simple linear gauge

  function drawGauge(value, settings) {

    // Create gauge with settings

    var gauge = anychart.gauges.linear();

    gauge.data([value, settings.value]);

    gauge.layout('horizontal');

​

    // Set scale for gauge

    var scale = anychart.scales.linear();

​

    scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

​

    // Set axis for gauge

    var axis = gauge.axis(0);

    axis.width('1%').offset('43%').scale(scale).orientation('bottom');

​

    // Set the axis label format

    axis.labels().format('{%Value}%').fontSize('10px');

​

    // Create and set bar point

    var barSeries = gauge.bar(0);

    barSeries

      .scale(scale)

      .width('4%')

      .fill('#296953')

      .stroke('#296953');

​

    // Create and set LED point

    var ledPointer = gauge.led(1);

    ledPointer

      .offset('10%')

      .width('30%')

      .count(settings.maximum)

      .scale(scale)

      .gap(0.55)

      .dimmer(function () {

        return '#eee';

      });

    ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

​

    // Create and set label with actual data

    var labelBar = barSeries.labels();

    labelBar

      .enabled(true)

      .offsetY('-15px')

      .fontColor('#455a64')

      .fontSize('12px')

      .fontWeight(600)

      .format('{%Value} %');

​

    // Set gauge tooltip

    gauge

      .tooltip()

      .useHtml(true)

      .titleFormat('{%Value} %')

      .format(

        'Maximum on scale: ' +

        settings.maximum +

        ' %'

      );

​

    return gauge;

  }

​

  // Create gauges

  var world = drawGauge(13.68, { maximum: 50, value: 27.13 });

  var europe = drawGauge(36.98, { maximum: 50, value: 47.28 });

  var nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });

  var sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });

  var asia = drawGauge(10.14, { maximum: 50, value: 27.16 });

  var oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });

  var africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

​

  world.a11y(true);

  europe.a11y(true);

  nAmerica.a11y(true);

​

  // Create standalone legend

  var legend = anychart.standalones.legend();

  legend

    .position('center')

    //.fontSize(14)

    .items([

      { text: 'Fully vaccinated', iconFill: '#296953' },

      { text: 'Partially vaccinated', iconFill: '#63b39b' },

      { text: 'Not vaccinated', iconFill: '#eee' }

    ]);

​

  // Create table to place gauges

  var layoutTable = anychart.standalones.table();

  layoutTable

    .hAlign('right')

    .vAlign('middle')

    .fontSize(14)

    .cellBorder(null);

​

  // Put gauges into the layout table

  layoutTable.contents([

    [null, 'COVID19 Vaccination - How far are we from the halfway mark?'],

    [null, '% of population partially and fully vaccinated'],

    [null, legend],

    ['World', world],

    ['Europe', europe],

    ['North America', nAmerica],

    ['South America', sAmerica],

    ['Asia', asia],

    ['Oceania', oceania],

    ['Africa', africa]

  ]);

​

  // Set height for first row in layout table

  layoutTable

    .getRow(0)

    .height(30)

    .fontSize(20)

    .hAlign('center');

​

  layoutTable

    .getRow(1)

    .height(40)

    .fontSize(16)

    .hAlign('center');

​

  layoutTable.getRow(2).height(40).fontSize(12);

  layoutTable.getCol(0).width(100);

​

  // Set container id and initiate drawing

  layoutTable.container('container');

  layoutTable.draw();

});