Gauge chart & label doesn't fit parent component

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 => Please do not submit support request here

Current behavior The chart is always full size and does not fit component size By the way, units & text are too small on firefox and does not fit chart size. But if I switch tabs and come back to the chart tab, the text is well displayed. I added this console log in scaleText : console.log(this.resizeScale + ' - ' + oldScale); and here are results on init view : 1 - 1 When I change and get back to chart tab :

2.46 - 1
2.46 - 2.46

Here is my component :

<div fxLayout="row" fxLayoutAlign="center center">
  <ngx-charts-gauge #graph
    [view]="view"
    [scheme]="colorScheme"
    [results]="graphData"
    [margin]="margin"
    [min]="0"
    [max]="100"
    [angleSpan]="360"
    [startAngle]="0"
    [units]="'front.bonus.value.progress' | translate"
    [showAxis]="false"
    [tooltipDisabled]="true"
    [textValue]="graphLabel">
  </ngx-charts-gauge>
</div>

view: Array<number> = [];
margin: Array<number> = [0, 0, 0, 0];
colorScheme = { domain: ['rgb(0, 130, 195)', 'rgb(255, 192, 88)'] };

Expected behavior The chart should fit its parent component size & the chart text should fit its chart size

Reproduction of the problem I can’t reproduce the problem with a fresh plunker so here are screenshots from my app : desktop mode (chart 600x400) :

mobile mode : chart is still 600x400 while my component is 320x334

FF text size bug with chart 600x400 :

• ngx-charts version: 6.0.1

• Angular version: 4.3.5

• Browser: Chrome 60 & FF 55.0.1

• Language: TypeScript 2.4.2 | ES7

[marjan-georgiev]

Try setting the height of the parent container and see if that fixes it.

<div fxLayout="row" fxLayoutAlign="center center" style="height:334px;">

[marjan-georgiev]

Closing this in favor of #560. Let’s continue discussion in there please.