[Chartjs]-Chart js: how can I align the legend and the title

by

4👍

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>

1👍

You can also put the code below at the end of chart script and then hide your legend in your chartjs options. This creates a ul element in the div that you can manipulate with css using the class and/or the id for greater control.

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

        /*-- Your chartjs code here --*/

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

    </script>
</html>

Leave a comment