Allow x-axis to be displayed on top of chart

projects/swimlane/ngx-charts/src/lib/area-chart/area-chart-normalized.component.ts

@@ -23,6 +23,7 @@ import { SeriesType } from '../common/circle-series.component';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-area-chart-normalized',
@@ -60,6 +61,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -171,6 +173,7 @@ export class AreaChartNormalizedComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis: boolean;
   @Input() yAxis: boolean;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean = false;
   @Input() showYAxisLabel: boolean = false;
   @Input() xAxisLabel: string;

projects/swimlane/ngx-charts/src/lib/area-chart/area-chart-stacked.component.ts

@@ -21,6 +21,7 @@ import { SeriesType } from '../common/circle-series.component';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { ScaleType } from '../common/types/scale-type.enum';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-area-chart-stacked',
@@ -58,6 +59,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -168,6 +170,7 @@ export class AreaChartStackedComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis: boolean = false;
   @Input() yAxis: boolean = false;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -23,6 +23,7 @@ import { Series } from '../models/chart-data.model';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { ScaleType } from '../common/types/scale-type.enum';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-area-chart',
@@ -60,6 +61,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -169,6 +171,7 @@ export class AreaChartComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis: boolean = false;
   @Input() yAxis: boolean = false;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() baseValue: any = 'auto';
   @Input() autoScale: boolean = false;
   @Input() showXAxisLabel: boolean;

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

@@ -23,6 +23,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { BarOrientation } from '../common/types/bar-orientation.enum';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal-2d',
@@ -59,6 +60,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -161,6 +163,7 @@ export class BarHorizontal2DComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -23,6 +23,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { isPlatformServer } from '@angular/common';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal-normalized',
@@ -51,6 +52,7 @@ import { isPlatformServer } from '@angular/common';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -142,6 +144,7 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -22,6 +22,7 @@ import { BarChartType } from './types/bar-chart-type.enum';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal-stacked',
@@ -50,6 +51,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -151,6 +153,7 @@ export class BarHorizontalStackedComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -16,6 +16,7 @@ import { BaseChartComponent } from '../common/base-chart.component';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal',
@@ -44,6 +45,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -96,6 +98,7 @@ export class BarHorizontalComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -22,6 +22,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { BarOrientation } from '../common/types/bar-orientation.enum';
 import { isPlatformServer } from '@angular/common';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-vertical-2d',
@@ -57,6 +58,7 @@ import { isPlatformServer } from '@angular/common';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [xAxisOffset]="dataLabelMaxHeight.negative"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
@@ -153,6 +155,7 @@ export class BarVertical2DComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -21,6 +21,7 @@ import { BarChartType } from './types/bar-chart-type.enum';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-vertical-normalized',
@@ -48,6 +49,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         ></svg:g>
@@ -140,6 +142,7 @@ export class BarVerticalNormalizedComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -21,6 +21,7 @@ import { BarChartType } from './types/bar-chart-type.enum';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-vertical-stacked',
@@ -48,6 +49,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [xAxisOffset]="dataLabelMaxHeight.negative"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
@@ -150,6 +152,7 @@ export class BarVerticalStackedComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -17,6 +17,7 @@ import { DataItem } from '../models/chart-data.model';
 import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bar-vertical',
@@ -45,6 +46,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [xAxisOffset]="dataLabelMaxHeight.negative"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
@@ -98,6 +100,7 @@ export class BarVerticalComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;
@@ -146,6 +149,7 @@ export class BarVerticalComponent extends BaseChartComponent {
 
   update(): void {
     super.update();
+    console.log("xOrient", this.xOrient);
 
     if (!this.showDataLabel) {
       this.dataLabelMaxHeight = { negative: 0, positive: 0 };

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

@@ -17,6 +17,7 @@ import { calculateViewDimensions } from '../common/view-dimensions.helper';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { LegendPosition, LegendOptions } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-box-chart',
@@ -38,6 +39,7 @@ import { ScaleType } from '../common/types/scale-type.enum';
           [xScale]="xScale"
           [showLabel]="showXAxisLabel"
           [labelText]="xAxisLabel"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         />
@@ -90,6 +92,7 @@ export class BoxChartComponent extends BaseChartComponent {
   @Input() showGridLines: boolean = true;
   @Input() xAxis: boolean = true;
   @Input() yAxis: boolean = true;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean = true;
   @Input() showYAxisLabel: boolean = true;
   @Input() roundDomains: boolean = false;

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

@@ -23,6 +23,7 @@ import { LegendOptions, LegendPosition } from '../common/types/legend.model';
 import { ScaleType } from '../common/types/scale-type.enum';
 import { ViewDimensions } from '../common/types/view-dimension.interface';
 import { isPlatformServer } from '@angular/common';
+import { Orientation } from '../common/types/orientation.enum';
 
 @Component({
   selector: 'ngx-charts-bubble-chart',
@@ -60,6 +61,7 @@ import { isPlatformServer } from '@angular/common';
           [maxTickLength]="maxXAxisTickLength"
           [tickFormatting]="xAxisTickFormatting"
           [ticks]="xAxisTicks"
+          [xOrient]="xOrient"
           [wrapTicks]="wrapTicks"
           (dimensionsChanged)="updateXAxisHeight($event)"
         />
@@ -160,6 +162,7 @@ export class BubbleChartComponent extends BaseChartComponent {
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis: boolean = true;
   @Input() yAxis: boolean = true;
+  @Input() xOrient: Orientation = Orientation.Bottom;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
   @Input() xAxisLabel: string;

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

@@ -47,7 +47,7 @@ export class AxisLabelComponent implements OnChanges {
 
     switch (this.orient) {
       case Orientation.Top:
-        this.y = this.offset;
+        this.y = -this.offset;
         this.x = this.width / 2;
         break;
       case Orientation.Bottom:

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

@@ -51,7 +51,18 @@ import { TextAnchor } from '../types/text-anchor.enum';
 
     <svg:g *ngFor="let tick of ticks" [attr.transform]="tickTransform(tick)">
       <svg:g *ngIf="showGridLines" [attr.transform]="gridLineTransform()">
-        <svg:line class="gridline-path gridline-path-vertical" [attr.y1]="-gridLineHeight" y2="0" />
+        <svg:line
+          *ngIf="orient === Orientation.Top"
+          class="gridline-path gridline-path-vertical"
+          [attr.y1]="gridLineHeight"
+          y2="0"
+        />
+        <svg:line
+          *ngIf="orient === Orientation.Bottom"
+          class="gridline-path gridline-path-vertical"
+          [attr.y1]="-gridLineHeight"
+          y2="0"
+        />
       </svg:g>
     </svg:g>
   `,
@@ -90,6 +101,8 @@ export class XAxisTicksComponent implements OnChanges, AfterViewInit {
   approxHeight: number = 10;
   maxPossibleLengthForTickIfWrapped = 16;
 
+  readonly Orientation = Orientation;
+
   @ViewChild('ticksel') ticksElement: ElementRef;
 
   get isWrapTicksSupported() {
@@ -149,10 +162,20 @@ export class XAxisTicksComponent implements OnChanges, AfterViewInit {
 
     this.textTransform = '';
     if (angle && angle !== 0) {
-      this.textTransform = `rotate(${angle})`;
-      this.textAnchor = TextAnchor.End;
       this.verticalSpacing = 10;
+      if (this.orient === Orientation.Bottom) {
+        this.textAnchor = TextAnchor.End;
+        this.textTransform = `translate(0, ${this.verticalSpacing}) rotate(${angle})`;
+      } else {
+        this.textAnchor = TextAnchor.Start;
+        this.textTransform = `translate(0, ${-this.verticalSpacing}) rotate(${angle})`;
+      }
     } else {
+      if (this.orient === Orientation.Bottom) {
+        this.textTransform = `translate(0, ${this.verticalSpacing})`;
+      } else {
+        this.textTransform = `translate(0, ${-this.verticalSpacing})`;
+      }
       this.textAnchor = TextAnchor.Middle;
     }
 
@@ -232,11 +255,11 @@ export class XAxisTicksComponent implements OnChanges, AfterViewInit {
   }
 
   tickTransform(tick: number): string {
-    return 'translate(' + this.adjustedScale(tick) + ',' + this.verticalSpacing + ')';
+    return 'translate(' + this.adjustedScale(tick) + ',0)';
   }
 
   gridLineTransform(): string {
-    return `translate(0,${-this.verticalSpacing - 5})`;
+    return `translate(0,${-5})`;
   }
 
   tickTrim(label: string): string {