Как добавить легенду в php mysql ChartJs

Я смог красиво отображать круговую диаграмму на моей странице и иметь всплывающие подсказки, которые показывают название и значение области диаграммы. Теперь я хочу иметь возможность добавлять легенду к диаграмме. В моей диаграмме показано общее количество студентов мужского и женского пола. Я хочу, чтобы легенда отображалась выше и, по крайней мере, имела значение количества учеников мужского и женского пола. Я смотрю эти темы, и никто не работает для меня:

1. Легенда круговой диаграммы – Chart.js
2. Как добавить ярлык в chart.js для круговой диаграммы

Вот как выглядит мой скрипт:

• Параметры выбора канала из БД в зависимости от других параметров выбора
• Ошибка в базе данных ajax insert
• Есть ли лучший способ обрабатывать 300 000 строк текстовых файлов и вставлять их в MySQL?
• Исходный код PHP base64 не правильно декодирован в Javascript
• Сохранить диаграммы Google в формате pdf

$.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); } }); }); 

для библиотеки я использую Chart.min.js