How to add space between legend and graph in ng2 chart?

Question

I would like to add space between the legend (last evaluation results) and the graph. Basically, if in my example the result is greater than 77, it will collide with the legend.
Check here for my example.

Yes, I've checked many solutions on the net, including other posts on this platform, but nothing is working in my current case.

Answer 1

You need a plugin to increase the height. You can override the fit function.

import { Component } from '@angular/core';
import {
  Chart,
  ChartConfiguration,
  ChartData,
  ChartType,
  Plugin,
} from 'chart.js';
import DataLabelsPlugin from 'chartjs-plugin-datalabels';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  barChartOptions: ChartConfiguration['options'] = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
        ticks: {
          display: false,
        },
        min: 0,
      },
    },
    plugins: {
      legend: {
        onClick: function (e) {
          return;
        },
      },
      datalabels: {
        align: 'end',
        anchor: 'end',
      },
      tooltip: {
        padding: 10,
      },
    },
    aspectRatio: 3,
  };
  barChartType: ChartType = 'line';
  barChartPlugins = [
    DataLabelsPlugin,
    <Plugin>{
      id: 'legend-padding',
      beforeInit: function (chart: Chart & { legend: { fit: Function } }) {
        // Get reference to the original fit function
        const originalFit = chart.legend.fit;

        // Override the fit function
        chart.legend.fit = function fit() {
          // Bind scope in order to use `this` correctly inside it
          originalFit.bind(chart.legend)();
          this.height += 20; // Change the height
        };
      },
    },
  ];

  barChartData: ChartData<'line'> = {
    // timestamps
    labels: ['15-05-2023', '15-05-2023', '15-05-2023'],
    datasets: [
      {
        // lasts results
        data: [77, 77, 77],
        label: 'Last evaluation results',
        backgroundColor: '#d1d9ff',
        borderColor: '#18276f',
        pointBackgroundColor: '#18276f',
      },
    ],
  };
}

stackblitz

Original Solution Nidhi Shah Answer