ChartJS图例未添加

Question

I am creating a legend for a line graph that was generated using ChartJS. The problem I am running into is the color boxes in the legend are not lining up correctly. Here is how I generate the legend:

var chartLegend = "<ul style=\"list-style-type: none;\">";
for(var i = 0; i < chartDatas.datasets.length; i++)
{
    chartLegend += "<li><div style=\"background-color:" + chartDatas.datasets[i].pointColor + ";height:20px; width:20px; float:left; margin:5px;\"></div>" + chartDatas.datasets[i].label + "</li>"
}

chartLegend += "</ul>";

Here is the full code

Is it possible to line up the boxes?

Answer 1

var chartLegend = "<ul style=\"list-style-type: none; padding:    0\">";
for(var i = 0; i < chartDatas.datasets.length; i++)
{
        chartLegend += "<li><span style=\"background-color:" + chartDatas.datasets[i].pointColor + ";height:20px; width:20px; display:inline-table; margin:5px;\"></span>" + chartDatas.datasets[i].label + "</li>"
}

demo