JSFiddle - React, Tailwind, and code Playground

Dev Skillset charts.js http://www.chartjs.org/

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<div class='container'>
  <h2>
    Skills
  </h2>
  <div class='row'>
    <div class='col-sm-4'>
      <figure>
        <canvas height='150' id='html_css' width='150'></canvas>
        <figcaption>
          Semantic HTML5 & CSS3
        </figcaption>
      </figure>
    </div>
    <div class='col-sm-4'>
      <figure>
        <canvas height='150' id='sass' width='150'></canvas>
        <figcaption>
          Sass
        </figcaption>
      </figure>
    </div>
    <div class='col-sm-4'>
      <figure>
        <canvas height='150' id='jquery' width='150'></canvas>
        <figcaption>
          jQuery
        </figcaption>
      </figure>
    </div>
    <div class='col-sm-4'>
      <figure>
        <canvas height='150' id='rails' width='150'></canvas>
        <figcaption>
          Ruby on Rails
        </figcaption>
      </figure>
    </div>
    <div class='col-sm-4'>
      <figure>
        <canvas height='150' id='backbone' width='150'></canvas>
        <figcaption>
          Backbone.js
        </figcaption>
      </figure>
    </div>
    <div class='col-sm-4'>
      <figure>
        <canvas height='150' id='photoshop' width='150'></canvas>
        <figcaption>
          Photoshop
        </figcaption>
      </figure>
    </div>
  </div>
</div>

CSS

figure {
  margin: 0 0 20px;
  text-align: center;
}

JavaScript

var options = {
  //segmentShowStroke: false,
  percentageInnerCutout: 70,
  //animation: true,
  animationEasing: 'easeOutQuint',
  //animateRotate: false,
  animateScale: true
};
var data = {
  html_css: [
  	{ value : 95, color : "hsl(120, 33%, 50%)" },
  	{ value : 5, color : "hsl(120, 10%, 90%)" }
  ],
  sass: [
  	{ value : 90, color : "hsl(120, 33%, 50%)" },
  	{ value : 10, color : "hsl(120, 10%, 90%)" }
  ],
  jquery: [
  	{ value : 90, color : "hsl(120, 33%, 50%)" },
  	{ value : 10, color : "hsl(120, 10%, 90%)" }
  ],
  rails: [
  	{ value : 60, color : "hsl(120, 33%, 50%)" },
  	{ value : 40, color : "hsl(120, 10%, 90%)" }
  ],
  backbone: [
  	{ value : 50, color : "hsl(120, 33%, 50%)" },
  	{ value : 50, color : "hsl(120, 10%, 90%)" }
  ],
  photoshop: [
  	{ value : 75, color : "hsl(120, 33%, 50%)" },
  	{ value : 25, color : "hsl(120, 10%, 90%)" }
  ]
};

var offset = 0;
$.each(data, function(key, data) {
  var canvas = document.querySelector('#' + key);
  if(canvas) {
    offset += 250;
    setTimeout(function() {
      var ctx = canvas.getContext('2d');
      var chart = new Chart(ctx);
      chart.Doughnut(data, options);
    }, offset);
  }
});