在Chart.js中对齐图表图例

Question

我不确定如何对齐图表图例。下面是我试过的堆积条形图代码，它将图例添加到左下角。我想把传奇放在右上角。

<style type="text/css">
        .chart-legend li {
           list-style-type: none;
        }

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

       } 
</style>

<div class = "col-xs-7 col-md-6" class="thumbnail">    
<div  class = "thumbnail" style="width:100%" > 
  <h4>  <span class="label label-primary">{{ a.title }}</span></h4>
   <div>     
    <canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
   </div>
 <div id="js-legend" class="chart-legend">
</div>
</div>
</div> 

<script src="{{ url_for('static', filename='js/chartJS/Chart.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/ChartStackedBar/src/Chart.StackedBar.js') }}"></script>

<script>

    var barChartData{{loopIndex}} = {
    labels : {{ serie.label | safe }},
    datasets : [
        {
        label: "Time Delay",
        fillColor: "rgba(255,0,0,0.3)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(255,0,0,0.4)",
        highlightStroke: "rgba(220,220,220,1)",
        data : {{ a.data [0] }}
        },

         {
        label: "Devices",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: {{ a.data [1] }}
    }
]

}

var myfunction = function(){
    var ctx{{loopIndex}} =  document.getElementById("canvas{{loopIndex}}").getContext("2d");
    window.myBar{{loopIndex}}  = new Chart(ctx{{loopIndex}}).StackedBar(barChartData{{loopIndex}}, {
        responsive: true
    });
    document.getElementById('js-legend').innerHTML = myBar{{loopIndex}}.generateLegend();       

}
allFunctions.push(myfunction);
</script>