Display a doughnut chart with multiple colors

by JeffC

HTML

<!doctype html>
<html>

<head>
  <title>Chart Example</title>
  <script src="chart.js"></script>
</head>

<body>
  <div style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
  </div>

  <script>
  var chartData = [
    {
    	value: 300,
    	color:"#F7464A",
    	highlight: "#FF5A5E",
    	label: "Red"
    },
    {
    	value: 50,
    	color: "#46BFBD",
    	highlight: "#5AD3D1",
    	label: "Green"
    },
    {
    	value: 100,
    	color: "#FDB45C",
    	highlight: "#FFC870",
    	label: "Yellow"
    },
    {
    	value: 40,
    	color: "#949FB1",
    	highlight: "#A8B3C5",
    	label: "Grey"
    },
    {
    	value: 120,
    	color: "#4D5360",
    	highlight: "#616774",
    	label: "Dark Grey"
    }
  ];
  
  window.onload = function(){
    var chartOptions = { responsive : true };
    var chart = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(chart).Doughnut(chartData, chartOptions);
  }
  </script>
</body>

</html>