score: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>

score: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>

Related Query

More Query from same tag