html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // Create data

  var data = [1000, 920, 800, 640];

​

  // Set gauge type

  var gauge = anychart.gauges.linear();

​

  // Creates data set on our data

  gauge.data(data);

​

  // Set Chart Title

  gauge

    .title()

    .enabled(true)

    .useHtml(true)

    .padding([0, 0, 15, 0])

    .text(

      'Weight and Volume Ratio of Product<br>' +

      '<span style="color: #212121; font-size: 12px">The amount in one kilogram </span>'

    );

​

  // Helper function to create Tank Series

  function createTank(i, name, offset, color) {

    // Create tank pointer of the data index

    gauge

      .tank(i)

      // Set pointer name

      .name(name)

      // Set pointer color fill

      .color(color)

      // Set pointer offset of the width gauge

      .offset(offset)

      // Set pointer width

      .width('10%');

  }

​

  // Create series

  createTank(0, 'Water', '0%', '#64b5f6');

  createTank(1, 'Olive oil', '11%', '#ffee58');

  createTank(2, 'Sugar', '22%', '#ffe0b2');

  createTank(3, 'Ground coffee', '33%', '#4e342e');

​

  // Turn on legend and sets some padding

  gauge.legend().enabled(true).padding([0, 0, 30, 0]);

​

  // Set axis scale settings

  var scale = gauge.scale();

  scale

    .minimum(0)

    .maximum(1000)

    // Set axis tick intervals

    .ticks({ interval: 200 })

    .minorTicks({ interval: 100 });

​

  // Enable axis minor ticks and sets axis offset

  var axis = gauge.axis();

  axis.minorTicks(true).width('0').offset('-1%');

​

  // Set axis labels formatter

  axis.labels().useHtml(true).format('{%Value} ml.');

​

  // Set tooltip formatter

  gauge.tooltip().format('{%Value} ml.');

​

  // Set container id and initiate drawing

  gauge.container('container');

  gauge.draw();

});