Chart.js html legend

by djp3d

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="myChartDiv">
    <canvas id="myChart" width="600" height="400"></canvas>
</div>

<div id="js-legend" class="chart-legend"></div>

CSS

.myChartDiv {
    max-width: 600px;
    max-height: 400px;
}

.chart-legend li span {
   display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    margin-left: 20px;
}

.chart-legend ul {
	list-style-type: none;
}

.chart-legend ul li {
	float:left;
  cursor: pointer;
}

.inactive {
  opacity: .5;
}

JavaScript

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Votes of 1st Round',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: '#1F699C',
        }, {
            label: 'Votes of 2nd Round',
            data: [4, 5, 7, 15, 6, 4],
            backgroundColor: '#C6C6C6',
        }]
    },
    options: {
    	  legend: {
				    display: false        
        }
    }
});

document.getElementById('js-legend').innerHTML = myChart.generateLegend();