Semi Doughnut in AnyChart

by cristiscu

HTML

<link href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js" type="text/javascript"></script>


    <div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
img { z-index: -1; }

#chart_cont, #chart_div {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

JavaScript

anychart.onDocumentReady(function () {

   gauge = anychart.gauges.circular();
   gauge
   	.fill('transparent').stroke(null)
   	.startAngle(270).sweepAngle(180);
   gauge.axis().labels(false);
   //gauge.data([73.2]);
   gauge.axis().scale().minimum(0).maximum(100).ticks(false).minorTicks(false);
   gauge.axis().fill('#545f69').width(0).ticks(false);
   gauge.needle().stroke('0 transparent').startRadius('0%').endRadius('0%');
   gauge.range(0, {
      from: 0,
      to: 30,
      position: 'i',
      fill: '#007c9c',
      startSize: 50,
      endSize: 50,
      radius: 98
   });
   gauge.range(1, {
      from: 30,
      to: 70,
      position: 'i',
      fill: '#019fcc',
      startSize: 50,
      endSize: 50,
      radius: 98
   });
   gauge.range(2, {
      from: 70,
      to: 100,
      position: 'i',
      fill: '#8fcd3e',
      startSize: 50,
      endSize: 50,
      radius: 98
   });
   gauge.label(1)
   	.text('45%')
    	.fontColor('#212121').fontSize(14)
   	.offsetY('68%').offsetX(25)
    .anchor('center');
   gauge.label(2)
   	.text('22%')
    	.fontColor('#212121').fontSize(14)
   	.offsetY('68%').offsetX(90)
    	.anchor('center');
   gauge.label(3)
   		.text('13%')
      .fontColor('#212121').fontSize(14)
   		.offsetY('68%').offsetX(155)
      .anchor('center');
   
   
   //$("#chart_div").css("background-image", "none");
   gauge.container("chart_div");
   gauge.draw();
   //$("#chart_div").css("background-color", "transparent");
});