Create space between legend and chart in charts.js

Question

I am working with charts.js but I'm facing an issue. My legend and bar chart value overlaps a bit.

I am not able to resolve this issue, It would be appreciated if there is a solution to this issue

I have shared JS fiddle link below

var ctx = document.getElementById("canvas").getContext("2d");
var nomi = [2017, 2018, 2019];

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: nomi,
    datasets: [{
        label: 'PP PERVENUTI',
        data: [50, 30, 45],
        backgroundColor: "#8A0808",
        fill: false,
        borderColor: "#8A0808",
        borderWidth: 3
      },
      {
        label: 'PP EVASI',
        data: [60, 45, 12],
        backgroundColor: "#0B610B",
        fill: false,
        borderColor: "#0B610B",
        borderWidth: 3
      },
      {
        label: 'PI PERVENUTI',
        data: [20, 25, 35],
        backgroundColor: "#8A0886",
        fill: false,
        borderColor: "#8A0886",
        borderWidth: 3
      },
      {
        label: 'PI EVASI',
        data: [10, 20, 30],
        backgroundColor: "#0404B4",
        fill: false,
        borderColor: "#0404B4",
        borderWidth: 3
      }
    ]
  },
  options: {
    legend: {
      display: true,
      position: "top"
    },
    hover: {
      animationDuration: 0
    },
    animation: {
      onComplete: function() {

        var ctx = this.chart.ctx;
        const chart = this.chart;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "black";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {

          if (chart.getDatasetMeta(i).hidden) {
            return;
          }

          for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
              var model = dataset._meta[key].data[i]._model;
              ctx.fillText(dataset.data[i], model.x, model.y);
            }
          }
        });
      }
    }
  }
});

I have also shared my code above

I don't know how to create space between legend and chart, and help will be appreciated thanks

score 0 · Accepted Answer · answered Dec 20 '21 at 17:50

If I am not wrong, there isnt a configuration built by chart js to put padding between the labels and the chart,although, the padding to the labels are applied in wor format, this means that chart js applies padding between labels, on the other hand, you can apply padding between the title of the chart and the labels.

If you want padding between the tittle of the chart and the chart you can use the following code:

                 plugins: {
                    title: {
                        display: true,
                        text:'Historico Mensual',
                    },
                    legend: {
                        labels: {
                            padding: 100
                        }
                    }
                },

Another solution it could be to change the position of the labels to the bottom with the following code:

options: {
legend: {
  display: true,
  position: "bottom"
},

And adding a layput padding so the values dont get outside the canvas.

  options: {
     layout:{
        padding:20
     }
  },

Create space between legend and chart in charts.js

1 Answers1