How to add legend to php mysql chartjs

Question

I was able to nicely display the pie chart on my page and have tooltips that show the name and value of the chart area. Now I want to be able to add a legend to the chart. My chart shows the total number of male and female students. I want the legend to appear higher and at least matter the number of male and female students. I have a look at these threads and no one works for me:

• Pie Chart Legend - Chart.js
• How to add shortcut to chart.js for pie chart

This is what my script looks like:

$.ajax({ url: 'data.php', type: 'GET', dataType: 'json', success:function(data){ console.log(data); var gender = []; var sum = []; for(var i in data){ gender.push(data[i].gender); sum.push(data[i].total); } var PieData = [ { value: sum[0], color: "#f56954", highlight: "#f56954", label: gender[0] }, { value: sum[1], color: "#00a65a", highlight: "#00a65a", label: gender[1] } ]; var pieChartCanvas = $("#mycanvas").get(0).getContext("2d"); var pieChart = new Chart(pieChartCanvas); var pieOptions = { //Boolean - Whether we should show a stroke on each segment segmentShowStroke: true, //String - The colour of each segment stroke segmentStrokeColor: "#fff", //Number - The width of each segment stroke segmentStrokeWidth: 2, //Number - The percentage of the chart that we cut out of the middle percentageInnerCutout: 0, // This is 0 for Pie charts //Number - Amount of animation steps animationSteps: 100, //String - Animation easing effect animationEasing: "easeOutBounce", //Boolean - Whether we animate the rotation of the Doughnut animateRotate: true, //Boolean - Whether we animate scaling the Doughnut from the centre animateScale: false, //Boolean - whether to make the chart responsive to window resizing responsive: true, // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio: true, //String - A legend template legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" }; //Create pie or douhnut chart // You can switch between pie and douhnut using the method below. pieChart.Doughnut(PieData, pieOptions); }, error:function(data){ console.log(data); } }); }); 

for the library I'm using Chart.min.js