How do I increase the space between the Legend and the Chart when using angular-chart.js?

đź‘Ť:0

Here’s the implementation of the fix from this Answer: https://stackoverflow.com/a/55411810, from this post: Chart.js – Increase spacing between legend and chart…

In whatever controller you’ve got setup, add an angular.module('graph').config() (“.config block”) so that you can access the ChartProvider and through it, access the Chart object:

angular.module('graph')
.config(function ($windowProvider, ChartJsProvider) {
  // Storing ChartJs on $window via $windowProvider.$get() in case
  // we need to do other stuff from directly within a Controller.
  let
    ChartJs =
      $windowProvider.$get().ChartJs =
        ChartJsProvider.$get().Chart;

  // Ref.: https://stackoverflow.com/a/55411810/7577883
  ChartJs.Legend.prototype.afterFit = function () {
    // You can change the height to whatever pixel value you need.
    this.height = this.height + 32;
  };
})
.controller('graphController', graphController);

function graphController($window) {
  // Example of your controller needs to do and/or options it needs to set.
  $scope.graphingData =       [ /* Your Data           */ ];
  $scope.graphingSeries =     [ /* The Series          */ ];
  $scope.graphingOptions =    [ /* ChartJs Options     */ ];
  $scope.graphingColours =    [ /* Chart Colour Scheme */ ];
}

In the template:

<canvas 
  id="line" 
  class="chart chart-line" 
  chart-data="graphingData"
  chart-series="graphingSeries" 
  chart-options="graphingOptions"
  chart-colors="graphingColours"
></canvas>

I would have added this as a comment to the referenced answer but my account’s rep. was too low being a new account.

I truly hope this info helps someone out there! Thanks to the folks who got me onto the right path!!!

Leave a comment