Y-Axis Labels Duplicating on Larger Resolutions

[ebaggg]

Describe the bug On my 1920 x 1080 Windows 10 resolution laptop monitor, the y-axis labels duplicate depending on how tall the chart is.

To Reproduce Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/angular-playground-y3hatj?file=app%2Fapp.component.html
2. Drag the height of your browser so the chart height is above 750px tall and notice the labels duplicate
3. (Another way is if on Windows you hold down the Ctrl and mouse wheel scroll to decrease the chart size it will duplicate the y-axis labels too)

Expected behavior The y-axis stay unique numbers like in lower resolutions.

Screenshots

Demo https://stackblitz.com/edit/angular-playground-y3hatj?file=app%2Fapp.component.html

ngx-charts version All versions

[kunwar97]

Any update on this?

[nickbanana]

still no update on this one?

[rpossemo]

Still no resolution? Is there any way to configure the graph to avoid this problem?

[Mathew44]

The problem has been located in projects/swimlane/ngx-charts/src/lib/common/axes/y-axis-ticks.component.ts.

Fixes that solved this problem.

1. First modification {{ tickTrim(tickFormat(tick)) }} -> {{ tickTrim1(tick) }}

    <svg:g #ticksel>
      <svg:g *ngFor="let tick of ticks" class="tick" [attr.transform]="transform(tick)">
        <title>{{ tickFormat(tick) }}</title>
        <svg:text
          stroke-width="0.01"
          [attr.dy]="dy"
          [attr.x]="x1"
          [attr.y]="y1"
          [attr.text-anchor]="textAnchor"
          [style.font-size]="'12px'"
        >
          {{ tickTrim1(tick) }}
        </svg:text>
      </svg:g>
    </svg:g>

2. Second modifcation. We need to add one function

   tickTrim1(label: number): number
   {
   return this.trimTicks ? trimLabel(label, this.maxTickLength) : label;
   }

   Please create Pull Request for that :)