html, body, .tg {

  width: 100%;

}

​

.tg, thead {

  height: 10%;

  color: #7c868e;

}

anychart.onDocumentReady(function () {

  // Create and return simple linear gauge

  function drawGauge(value, settings, name, tableRow) {

    // Create gauge with settings

    const gauge = anychart.gauges.linear();

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

    gauge.layout('horizontal');

    // enable a11y - accessibility settings

    // you can learn more in documentation article - https://docs.anychart.com/Common_Settings/Accessibility/Settings

    gauge.a11y(true);

    // format the description text for a screen reader

    gauge.a11y().titleFormat(function(e){

      return `${name} gauge chart. The first value is ${value} and the second one is ${settings.value}`;

    });

​

    // Set scale for gauge

    const scale = anychart.scales.linear();

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

​

    // Set axis for gauge

    const axis = gauge.axis(0);

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

​

    // Create and set bar point

    const barSeries = gauge.bar(0);

    barSeries

      .scale(scale)

      .width('4%');

​

    // Create and set label with actual data

    const labelBar = barSeries.labels();

    labelBar

      .enabled(true)

      .offsetY('-15px');

​

    // Create and set LED point

    const 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']);

​

    gauge.container(`td-${tableRow}-1`).draw();

  }

​

  // Create gauges

  drawGauge(13.68, { maximum: 50, value: 27.13 }, 'world', 0);

  drawGauge(36.98, { maximum: 50, value: 47.28 }, 'europe', 1);

  drawGauge(36.77, { maximum: 50, value: 46.53 }, 'north america', 2);

  drawGauge(22.8, { maximum: 50, value: 40.54 }, 'south america', 3);

  drawGauge(10.14, { maximum: 50, value: 27.16 }, 'asia', 4);

  drawGauge(9.75, { maximum: 50, value: 22.12 }, 'oceania', 5);

  drawGauge(1.56, { maximum: 50, value: 3.04 }, 'africa', 6);

});