Chart js: how can I align the legend and the title

问题

I want to align the orders to the left and the legends to center center. I've tried doing

title:{
      display:true,
      fontSize:18,
      text: "Products",
      titleAlign:'left'
    }

but textalign doesn't seem to work for me nor the horizontal

回答1:

Check the Chart.js docs, there is no options like titleAlign, see: https://www.chartjs.org/docs/latest/configuration/title.html. It should be in the future, there is an pull request for that: https://github.com/chartjs/Chart.js/pull/5866 .

There is an option to do that, you should not display chart title and add your own. Here is example how I've done that

<div class="panel panel-default">
    <div class="panel-heading">
        <h5>{{ title }}</h5>
    </div>
    <div class="panel-body">
         <canvas id="my-chart" width="150" height="150"></canvas>
    </div>
</div>

来源：https://stackoverflow.com/questions/54396656/chart-js-how-can-i-align-the-legend-and-the-title