👍:0
In the example you can see how to do this, you can note that i use doughut but is the same idea to do this with pie chart:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart-area" style="display:inline;"></canvas>
<script>
var doughnutData = [
{
value: 200,
color: "#FFF",
label:"White",
},
{
value: 200,
color: "#bb2028",
label:"Red",
},
{
value: 80,
color: "#d97128" ,
label:"Orange",
},
{
value: 40,
color: "#fada09",
label:"Yellow",
},
{
value: 100,
color: "#6bb345",
label:"Light Green",
},
{
value: 60,
color: "#b4aea7",
label:"Gray",
},
{
value: 200,
color:"#2d5f2e",
fillColor:"#2d5f2e",
label:"Green",
}
];
window.onload = function(){
var helpers = Chart.helpers;
var canvas= document.getElementById("chart-area");
var ctx = canvas.getContext("2d");
var globalChartConfig = {
responsive : true,
tooltipTemplate: "<%if (label){%>Label Color: <%=label%>: <%}%> <%= value %>",
}
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, globalChartConfig);
};
</script>