html,

body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

var data = [32, 100, {value: 75}, '90,339', '210,576'];

var dataSet = anychart.data.set(data);

​

//function with gauge series

var makeBarWithBar = function (gauge, radius) {

  var stroke = null;

  //set percent label

  gauge

    .label(0)

    .text('<span style="">' + data[0] + '%</span>')

    .useHtml(true)

    .hAlign('center')

    .vAlign('middle')

    .anchor('center')

    .fontSize(25)

    .offsetX("50%")

    .offsetY("5%");

  //set additional text label

   gauge

    .label(1)

    .text(`<span>£${data[3]} of £${data[4]}</span>`)

    .anchor('center')

    .hAlign('center')

    .useHtml(true)

    .fontSize(16)

    .offsetY('-15%')

    .offsetX('50%')

    .width('50%')

    .height('10%')

  //set commentary text

     gauge

    .label(2)

    .text(`<span>purchases quarter to date</span>`)

    .anchor('center')

    .hAlign('center')

    .useHtml(true)

    .fontSize(12)

    .offsetY('-25%')

    .offsetX('50%')

    .width('50%')

    .height('10%')

  //set progress bar    

  gauge

    .bar(0)

    .dataIndex(0)

    .radius(radius)

    .width("22%")

    .stroke(null)

    .fill('orange')

    .zIndex(5);

  //set process bar

  gauge

    .bar(1)

    .dataIndex(1)

    .radius(radius)

    .width('22%')

    .fill('lightgrey')

    .stroke(stroke)

    .zIndex(4);

  //set goal bmarker

  gauge

    .marker(0)

    .type("line")

    .fill('green')

    .position('center')

    .radius(radius)

    .dataIndex(2)

    .size(10.5)

​

};

​

​

​

anychart.onDocumentReady(function () {

  var gauge = anychart.gauges.circular();

  gauge.data(dataSet);

  //set chart parameters

  gauge

    .fill('transparent')

    .stroke(null)

    .padding(0)

    .margin(0)

    .startAngle(0)

    .sweepAngle(360);

​

  //set chart axis

  var axis = gauge.axis().radius(100).width(1).fill(null);

  //set chart axis apperance

  axis

    .scale()

    .minimum(0)

    .maximum(100)

  axis.labels().enabled(false);

  axis.ticks().enabled(false);

  axis.minorTicks().enabled(false);

  //call a series creatin function

  makeBarWithBar(gauge, 90);

  //set chart angle

  gauge.startAngle(-100);

  gauge.sweepAngle(200);

​

  gauge.background().enabled(true).fill('transparent');

  gauge.container('container');

  gauge.title().useHtml(true);

  gauge.title().fontSize(25);

  gauge.title("<span>Accesories<span> <br> Q2 Target</span>")

​

  gauge.draw();

});