Incorrect legend placement with two charts of the same type

[patrickchoi]

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

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

Current behavior I have put two ngx-charts-bar-horizontal in the same page. When the legend display is set to true on both, the legend position of the 2nd chart is strangely attached to the 1st graph.

Expected behavior The legend should appear in line with the chart that it is attached to.

Reproduction of the problem Here is the code & screenshot. Note that the legend should appear with the 2nd chart, highlighted by the pink box.

          <ng-template matTabContent>

            <div style="margin: 20px;">
              <ngx-charts-bar-horizontal
                [view]="view"
                [scheme]="colorScheme"
                [results]="feedback_data"
                [gradient]="gradient"
                [xAxis]="showXAxis"
                [yAxis]="showYAxis"
                [legend]="showLegend"
                [showXAxisLabel]="showXAxisLabel"
                [showYAxisLabel]="showYAxisLabel"
                [xAxisLabel]="xAxisLabel"
                [yAxisLabel]="yAxisLabel"
                (select)="onSelect($event)">
              </ngx-charts-bar-horizontal>
            </div>

            <div style="margin: 20px;">
              <ngx-charts-bar-horizontal
                [view]="star_view"
                [scheme]="colorScheme"
                [results]="patient_rating_arr"
                [gradient]="star_gradient"
                [xAxis]="star_showXAxis"
                [yAxis]="star_showYAxis"
                [legend]="star_showLegend"
                [showXAxisLabel]="star_showXAxisLabel"
                [showYAxisLabel]="star_showYAxisLabel"
                [xAxisLabel]="star_xAxisLabel"
                [yAxisLabel]="star_yAxisLabel"
                (select)="onSelect($event)">
              </ngx-charts-bar-horizontal>
            </div>
          </ng-template>

What is the motivation / use case for changing the behavior?

• ngx-charts version: 9.0.0

• Angular version: 6.0.3

• Browser: Chrome latest, Firefox latest

[franklinpious]

is there any fix available for this ?