Grafico de dona (mitad)

Librería utilizada es Charts.js

by Hugo Lizama

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<div class="m-chart">
  <canvas id="colors" width="300" height="300"></canvas>
</div>

JavaScript

var pieData = {
    labels: [
      "Red",
      "Green",
      "Yellow"
    ],
    datasets: [
      {
        data: [300, 50, 100],
        backgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }]
    };

Chart.defaults.global.responsive = false;

var context = $("#colors");
var skillsChart = new Chart(context, {
  type: 'doughnut', 
  data: pieData,
  animation:{
    animateScale:true
  },
  options: {
    circumference: Math.PI,
    rotation: 1.0 * Math.PI
  }}
);