html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

   // create data

   var data = [25];

​

   // set the gauge type

   var gauge = anychart.gauges.linear();

​

   // set the data for the gauge

   gauge.data(data);

​

   // set the layout

   gauge.layout('horizontal');

​

   // create a color scale

   var scaleBarColorScale = anychart.scales.ordinalColor().ranges(

  [

      {

          from: 0,

          to: 25,

          color: ['#dd2c00']

      },

      {

          from: 25,

          to: 50,

          color: ['#ef6c00']

      },

      {

          from: 50,

          to: 75,

          color: ['#16685d']

      },

      {

          from: 75,

          to: 100 ,

          color: ['#00838f']

      }

  ]

  );

​

   // create a Scale Bar

   var scaleBar = gauge.scaleBar(0);

​

   // set the relative height of the control points of the scale bar

   scaleBar.points([

       {height: 1, left: 1, right: 0}

   ]);

​

   // set the height and offset of the Scale Bar (both as percentages of the gauge height)

   scaleBar.width('10%');

   scaleBar.offset('31%');

​

   // use the color scale (defined earlier) as the color scale of the Scale Bar

   scaleBar.colorScale(scaleBarColorScale);

​

   // add a marker pointer

   var marker = gauge.marker(0);

​

   // set the color of the marker

   marker.color('black');

​

   // set the width of the marker

   marker.width(15);

​

   // set the offset of the pointer as a percentage of the gauge width

   marker.offset('43%');

​

   // set the marker type

   marker.type('triangle-up');

​

   // set the zIndex of the marker

   marker.zIndex(10);

​

   // configure the scale

   var scale = gauge.scale();

   scale.minimum(0);

   scale.maximum(100);

   scale.ticks().interval(10);

​

   // configure the axis

   var axis = gauge.axis();

   axis.minorTicks(true)

   axis.minorTicks().stroke('#cecece');

   axis.width('1%');

   axis.offset('29.5%');

   axis.orientation('top');

​

   // format axis labels

   axis.labels().format('{%value}%');

​

   // set paddings

   gauge.padding([0, 50]);

​

   // set the container id

   gauge.container('container');

​

   // initiate drawing the gauge

   gauge.draw();

});