Enable trim and wrap feature to axis label

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts

@@ -40,6 +40,9 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [showLabel]="showXAxisLabel"
           [labelText]="xAxisLabel"
           [trimTicks]="trimXAxisTicks"
+          [trimLabel]="trimXAxisLabel"
+          [maxLabelLength]="maxXAxisLabelLength"
+          [wrapLabel]="wrapXAxisLabel"
           [rotateTicks]="rotateXAxisTicks"
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
@@ -55,6 +58,9 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [showLabel]="showYAxisLabel"
           [labelText]="yAxisLabel"
           [trimTicks]="trimYAxisTicks"
+          [trimLabel]="trimYAxisLabel"
+          [maxLabelLength]="maxYAxisLabelLength"
+          [wrapLabel]="wrapYAxisLabel"
           [maxTickLength]="maxYAxisTickLength"
           [tickFormatting]="yAxisTickFormatting"
           [ticks]="yAxisTicks"
@@ -101,6 +107,12 @@ export class BarHorizontalComponent extends BaseChartComponent {
   @Input() xAxisLabel: string;
   @Input() yAxisLabel: string;
   @Input() tooltipDisabled: boolean = false;
+  @Input() trimXAxisLabel: boolean;
+  @Input() trimYAxisLabel: boolean;
+  @Input() wrapXAxisLabel: boolean;
+  @Input() wrapYAxisLabel: boolean;
+  @Input() maxXAxisLabelLength: number = 16;
+  @Input() maxYAxisLabelLength: number = 16;
   @Input() gradient: boolean;
   @Input() showGridLines: boolean = true;
   @Input() activeEntries: any[] = [];

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts

@@ -41,6 +41,9 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [showLabel]="showXAxisLabel"
           [labelText]="xAxisLabel"
           [trimTicks]="trimXAxisTicks"
+          [trimLabel]="trimXAxisLabel"
+          [maxLabelLength]="maxXAxisLabelLength"
+          [wrapLabel]="wrapXAxisLabel"
           [rotateTicks]="rotateXAxisTicks"
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
@@ -58,6 +61,9 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [showLabel]="showYAxisLabel"
           [labelText]="yAxisLabel"
           [trimTicks]="trimYAxisTicks"
+          [trimLabel]="trimYAxisLabel"
+          [maxLabelLength]="maxYAxisLabelLength"
+          [wrapLabel]="wrapYAxisLabel"
           [maxTickLength]="maxYAxisTickLength"
           [tickFormatting]="yAxisTickFormatting"
           [ticks]="yAxisTicks"
@@ -100,6 +106,10 @@ export class BarVerticalComponent extends BaseChartComponent {
   @Input() yAxis;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
+  @Input() trimXAxisLabel: boolean;
+  @Input() trimYAxisLabel: boolean;
+  @Input() wrapXAxisLabel: boolean;
+  @Input() wrapYAxisLabel: boolean;
   @Input() xAxisLabel: string;
   @Input() yAxisLabel: string;
   @Input() tooltipDisabled: boolean = false;
@@ -112,6 +122,8 @@ export class BarVerticalComponent extends BaseChartComponent {
   @Input() rotateXAxisTicks: boolean = true;
   @Input() maxXAxisTickLength: number = 16;
   @Input() maxYAxisTickLength: number = 16;
+  @Input() maxXAxisLabelLength: number = 16;
+  @Input() maxYAxisLabelLength: number = 16;
   @Input() xAxisTickFormatting: any;
   @Input() yAxisTickFormatting: any;
   @Input() xAxisTicks: any[];

projects/swimlane/ngx-charts/src/lib/common/axes/axis-label.component.ts

@@ -22,6 +22,9 @@ export class AxisLabelComponent implements OnChanges {
   @Input() offset: number;
   @Input() width: number;
   @Input() height: number;
+  @Input() maxLabelLength: number;
+  @Input() trimLabel: boolean;
+  @Input() wrapLabel: boolean;
 
   x: number;
   y: number;

projects/swimlane/ngx-charts/src/lib/common/axes/x-axis.component.ts

@@ -12,6 +12,7 @@ import {
 import { XAxisTicksComponent } from './x-axis-ticks.component';
 import { Orientation } from '../types/orientation.enum';
 import { ViewDimensions } from '../types/view-dimension.interface';
+import { select } from 'd3-selection';
 
 @Component({
   selector: 'g[ngx-charts-x-axis]',
@@ -35,14 +36,19 @@ import { ViewDimensions } from '../types/view-dimension.interface';
         [wrapTicks]="wrapTicks"
         (dimensionsChanged)="emitTicksHeight($event)"
       />
+      <title>{{ labelText }}</title>
       <svg:g
         ngx-charts-axis-label
+        class="x-axis-label"
         *ngIf="showLabel"
-        [label]="labelText"
+        [label]="labelTextTemp"
         [offset]="labelOffset"
         [orient]="orientation.Bottom"
         [height]="dims.height"
         [width]="dims.width"
+        [trimLabel]="trimLabel"
+        [maxLabelLength]="maxLabelLength"
+        [wrapLabel]="wrapLabel"
       ></svg:g>
     </svg:g>
   `,
@@ -63,6 +69,9 @@ export class XAxisComponent implements OnChanges {
   @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() xAxisOffset: number = 0;
   @Input() wrapTicks = false;
+  @Input() maxLabelLength: number;
+  @Input() trimLabel: boolean;
+  @Input() wrapLabel: boolean;
 
   @Output() dimensionsChanged = new EventEmitter();
 
@@ -76,6 +85,7 @@ export class XAxisComponent implements OnChanges {
   tickStroke: string = '#ccc';
   strokeWidth: string = 'none';
   padding: number = 5;
+  labelTextTemp: string;
 
   readonly orientation = Orientation;
 
@@ -91,6 +101,92 @@ export class XAxisComponent implements OnChanges {
     if (typeof this.xAxisTickCount !== 'undefined') {
       this.tickArguments = [this.xAxisTickCount];
     }
+
+    // labelLength = number of characters
+    let labelLength = this.labelText.length;
+    this.labelTextTemp = this.labelText;
+    this.maxLabelLength = Number(this.maxLabelLength);
+    let labelElement = select('.xAxisLabel');
+    let textElement = labelElement.select('text');
+    let xVal;
+    if (!textElement.empty()) {
+      xVal = textElement.attr('x');
+    }
+
+    if (this.showLabel && this.trimLabel && this.maxLabelLength > 0) {
+      if (this.maxLabelLength < labelLength) {
+        // trim
+        let tspanElements = textElement.selectAll('tspan');
+        if (tspanElements) {
+          tspanElements.remove();
+        }
+        labelLength = this.maxLabelLength;
+        this.labelTextTemp = this.labelText.slice(0, labelLength) + '...';
+        textElement.text(this.labelTextTemp);
+      } else {
+        this.labelTextTemp = this.labelText;
+        textElement.text(this.labelTextTemp);
+      }
+    } else if (this.showLabel && this.wrapLabel && this.maxLabelLength > 0) {
+      // wrap with specified maxLabelLength
+
+      if (this.maxLabelLength < labelLength && this.maxLabelLength > 0) {
+        textElement.text('');
+
+        const firstLine = this.labelTextTemp.slice(0, this.maxLabelLength);
+        textElement.append('tspan')
+          .text(firstLine)
+          .attr('dy', '1em');
+        let start = this.maxLabelLength;
+        while (start + this.maxLabelLength <= labelLength) {
+          let line = this.labelTextTemp.slice(start, start + this.maxLabelLength);
+          textElement.append('tspan')
+            .text(line)
+            .attr('x', xVal)
+            .attr('dy', '1.2em');
+          start += this.maxLabelLength;
+        }
+        if (start < labelLength) {
+          let lastLine = this.labelTextTemp.slice(start, labelLength);
+          textElement.append('tspan')
+            .text(lastLine)
+            .attr('x', xVal)
+            .attr('dy', '1.2em');
+        }
+      } else {
+        this.labelTextTemp = this.labelText;
+        textElement.text(this.labelTextTemp);
+      }
+    } else if (this.maxLabelLength == 0 && this.wrapLabel) {
+      // auto-wrap without specified maxLabelLength
+      if (labelLength > this.dims.width / 11) {
+        let wrappedLines = this.wrapText(this.labelTextTemp, this.dims.width / 11);
+        let firstLine = wrappedLines[0];
+        textElement.text('');
+        textElement.append('tspan')
+          .text(firstLine)
+          .attr('dy', '1em');
+        let xVal = textElement.attr('x');
+        for (let i = 1; i < wrappedLines.length; i++) {
+          let line = wrappedLines[i];
+          textElement.append('tspan')
+            .text(line)
+            .attr('x', xVal)
+            .attr('dy', '1.2em');
+        }
+      } else {
+        this.labelTextTemp = this.labelText;
+        textElement.text(this.labelTextTemp);
+      }
+    } else if (!this.trimLabel && !this.wrapLabel) {
+      let tspanElements = textElement.selectAll('tspan');
+      if (tspanElements) {
+        tspanElements.remove();
+      }
+      this.labelTextTemp = this.labelText;
+      textElement.text(this.labelTextTemp);
+    }
+
   }
 
   emitTicksHeight({ height }): void {
@@ -102,4 +198,28 @@ export class XAxisComponent implements OnChanges {
       }, 0);
     }
   }
+
+  wrapText(text, maxLineWidth) {
+    const words = text.split(' ');
+    let lines = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const testLineLength = testLine.length;
+
+      if (testLineLength <= maxLineWidth) {
+        currentLine = testLine;
+      } else {
+        lines.push(currentLine);
+        currentLine = word;
+      }
+    }
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  }
 }