[Chartjs]-How to add margin bottom in Tittle ChartJS

by

3👍

✅

You can use padding property on the title option to achieve that:

var ctx_age_range = document.getElementById('chart_age_range');
var myDoughnutChart = new Chart(ctx_age_range, {
    type: 'bar',
    data: {
        labels: ["<20", "20-29", "30-39", "40-55", ">56"],
        datasets: [{
          label: "Cantidad",
          backgroundColor: ["#47b3d5", "#47b3d5","#47b3d5","#47b3d5","#47b3d5"],
          data: [0.32,34.55,34.79,25.32,5.02]
        }]
    },
    options: {
        legend: {
            display: false,
         },
        title: {
            display: true,
            text: 'CASOS POR RANGO DE EDAD',
            fontSize:15,
            color:"black",
            padding: 30
        },
        scales: {
            xAxes: [{
                gridLines: {display: false},
                ticks: {
                    stepSize: 1,
                    min: 0,
                    fontSize:12
                },
                barPercentage: 0.8,
                categoryPercentage: 1,
            }],
            yAxes: [{
                scaleLabel: {
                    display: false,
                },
                gridLines: {display: false,drawBorder:false},
                ticks:{
                    display:false,
                },
            }]
        },
        plugins: {
            datalabels: {
                display: true,
                align: 'end',
                anchor: 'end',
                formatter: function(value, ctx) {
                    return value+'%';
                },
                color:'black',
                font:{
                    size: 11
                }
            }
        }
                        
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="chart_age_range" width="400" height="400"></canvas>

Leave a comment