Chartjs-Chart.js legend not working for pie chart

The legend must be added to an element separate from the canvas element. So what you need is something like

...
<h3>A</h3><canvas id="i1"></canvas>
<div id="i1-legend"></div>
...

with script

document.getElementById('i1-legend').innerHTML = skillsChart.generateLegend();

Also, you’d probably need CSS to style it right, like so

ul.pie-legend {
    list-style: none;
}
ul.pie-legend span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}