đź‘Ť: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!!!