Merge branch 'MDL-78365-405' of https://github.com/pedrojordao/moodle into MOODLE_405_STABLE

lib/amd/src/chart_output_chartjs.js

@@ -188,10 +188,15 @@ define([
      */
     Output.prototype._makeConfig = function() {
         var charType = this._getChartType();
+        var labels = this._cleanData(this._chart.getLabels());
         var config = {
             type: charType,
             data: {
-                labels: this._cleanData(this._chart.getLabels()),
+                // If the label is longer than 25 characters, truncate it and add an
+                // ellipsis to avoid breaking the chart.
+                labels: labels.map((label) => {
+                    return label.length > 25 ? `${label.substring(0, 25)}...` : label;
+                }),
                 datasets: this._makeDatasetsConfig()
             },
             options: {
@@ -249,6 +254,12 @@ define([
 
         config.options.plugins.tooltip = {
             callbacks: {
+                title: (ctx) => {
+                    // Add line breaks to the tooltip title to prevent the tooltip from cutting
+                    // off if the title has a character count that overlaps the width of the chart.
+                    var label = labels[ctx[0].dataIndex];
+                    return label.match(/.{1,80}/g);
+                },
                 label: this._makeTooltip.bind(this)
             }
         };