Set min/max height for horizontal bars.

[BoJIbFbI4]

I'm submitting a ... (check one with "x")

• [ ] bug report - search github for a similar issue or PR before submitting
• [ ] feature request
• [X] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior Scaling bar height according to bar quantity.

Expected behavior Set min/max 'horizontal' bar height to avoid looking like on screenshots.

• ngx-charts version: latest

• Angular version: latest

• Browser: [all]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[IVIyg0t]

I second this feature!

[BoJIbFbI4]

I second this feature!

so listen: if you use Angular/Flex you have the option to set fixed height:

<div *ngIf="colorScheme" class="w-100 h-100" fxLayout="column" fxLayoutAlign>
        <div *ngIf="loaded" [fxFlex]="graphHeight" [perfectScrollbar] class="w-100 position-relative m-0 mt-2 p-0"  style="z-index: 10;"  fxLayout="column">
            <div [fxFlex]="chartHeight" class="w-100 h-100 m-0 pt-1 p-0" fxLayout="column">
                <ngx-charts-bar-horizontal ...>
                    <ng-template #tooltipTemplate let-model="model">
                    </ng-template>
                </ngx-charts-bar-horizontal>
            </div>
        </div>

        <div *ngIf="max && loaded" fxFlex="0 0 100%" class="w-100 rulerBarContainer position-absolute"             fxLayout="column"  fxLayoutAlign="center center">
            <ngx-charts-bar-horizontal>    </ngx-charts-bar-horizontal>
        </div>

    </div>

where :

   const pileLength = pilesGraph.length * 75;
   this.chartHeight = `0 0 calc(${pileLength}px)`;
   this.graphHeight = pileLength < 700 ? `0 0 calc(${pileLength}px)` : `0 0 calc(100% - 75px)`;

and you can see some thing like this:

[kavyahalani]

I also need fixed height bars because i want the labels on Y-axis to be on the top of bars

[alexleen]

You don't even need flex - just set the graph's container height to a value that scales with the number of bars (like @BoJIbFbI4 did): HTML:

<div style="overflow: auto; height: 100%">
    <div [style.height.px]="graphHeight">
        <ngx-charts-bar-horizontal-2d ...>

        </ngx-charts-bar-horizontal-2d>
    </div>
</div>

Just make sure the overall container has overflow: auto and height: 100% if you want the graph to fill the container with scrollbars. TS:

graphHeight: number;
...
this.graphHeight = 75 * this.groups.length;

Unfortunately, I'm not sure how to freeze the x-axis scale and label so you'll need to scroll to the bottom to see it.

[yarychh]

Hey, here is the directive to solve this issue:

import { Directive, Input, ElementRef, OnInit } from "@angular/core";

@Directive({
  selector: "[resizeHorizontalGraph]"
})
export class ResizeHorizontalGraphDirective implements OnInit {
  @Input() public arr: any[] = [];
  @Input() public barSize: number = 0;

  constructor(private ref: ElementRef) {}

  ngOnInit() {
    if (this.arr.length && this.barSize > 0) {
      this.ref.nativeElement.style.height = `${this.arr.length * this.barSize}px`;
    }
  }
}

then apply it to your chart container as shown below:

<div resizeHorizontalGraph [arr]="totatIssueStats" [barSize]="50"  class="workspaceGraph">
  <ngx-charts-bar-horizontal
    [results]="totatIssueStats"
    [scheme]="colorScheme"
    [xAxis]="true"
    [yAxis]="true"
    [showXAxisLabel]="false"
    [showYAxisLabel]="false"
    [legend]="false"
  >
  </ngx-charts-bar-horizontal>
</div>