CodePen

HTML

            
              <canvas class="chart" id="pieChart" width="250" height="250"></canvas>

<ul class="key">
  <li>
    <span style="background: #F38630;"></span>
    10% - It's not good on any site.
  </li>
  <li>
    <span style="background: #E0E4CC;"></span>
    46% - It can be good on any site.
  </li>
  <li>
    <span style="background: #69D2E7;"></span>
    44% - It's good for mobile sites, but not desktop sites.
  </li>
</ul>
            
          
!

CSS

            
              .key {
  padding: 3rem 0 0 0;
  list-style: none;
  span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
  }
  li {
    font-family: "Lucida Grande", sans-serif;
    margin: 0 0 0.5rem 0;
  }
}

.chart {
  float: left;
  margin: 0 2rem 0 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var pieChartData = [
  {
    value: 10,
    color:"#F38630"
  },
  {
    value : 46,
    color : "#E0E4CC"
  },
  {
    value : 44,
    color : "#69D2E7"
  }
  
];

var ctx = document.getElementById("pieChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(pieChartData, {});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................