MDL-78365 libraries: Truncate ChartJs labels to avoid display issues

If the chart label is too large, it is breaking the display, so we will
add ellipsis to the label and display the full text in the tooltip.

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)
             }
         };