html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var chart = anychart.gauges.circular([{value: 27}]);

​

    chart.padding('10%');

    chart.startAngle(270);

    chart.sweepAngle(180);

    chart.fill('#fff');

    chart.stroke(null);

​

    var axis = chart.axis();

    axis.radius(95);

    axis.fill('#7CFC00 0.3');

    axis.width(10);

    axis.cornersRounding('50%');

​

    axis.scale().minimum(0);

    axis.scale().maximum(100);

​

    axis.ticks().length(4);

    axis.ticks().position('outside');

​

    axis.labels().position('outside');

​

    chart.range({

        from: 50,

        to: 80,

        position: 'inside',

        fill: '#F44336',

        startSize: 10,

        endSize: 10,

        radius: 90

    });

​

    var range = chart.range();

​

    // Set the rounding of range.

    range.cornersRounding('50%');

​

    chart.title('Set radius for the rounding of circular range');

    chart.needle();

    chart.container('container');

    chart.draw();

});