angularfirefoxhighchartsangular-highcharts

Firefox Highcharts is not showing up but it's all OK in Chrome and Edge

The following pie chart shows up in Chrome and Edge but not in Firefox (latest vers 88).

I'm trying to horizontally align two divs. On the left a form and on the right a chart.

I omit all the details inside the form html because I think they're not relevant.

I've also tried with float:left vs float:none; or float: right instead of display: inline-block

  <div  style="display: inline-block;vertical-align:top;">
  <h2>{{title}}</h2>
  <form [formGroup]="rangeFormGroup">  
    <div>  
      <mat-form-field appearance="fill">  
      </mat-form-field> 
    </div>  
    <div>
      <mat-form-field appearance="fill">
      </mat-form-field> 
      <br>
      <mat-form-field appearance="fill">
      </mat-form-field> 
    </div>
  </form>
</div>
<div style="display: inline-block;height: 500px;width: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [constructorType]="chartConstructor"
    [options]="chartOptions[0]"
    [(update)]="updateFlag"
    [oneToOne]="oneToOneFlag"
    [runOutsideAngular]="runOutsideAngular"
  ></highcharts-chart>
</div>

This is what I see from chrome

enter image description here

and from firefox

enter image description here

When I build I receive a warning saying

Warning: F:\myapp\src\app\app.component.ts depends on 'highcharts'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

but maybe this is also not the cause (or why should it affect only firefox?)

Solution

  • Problem was in the app.component.ts.

    Firefox wants the height set in the chart options, like below

      options: Highcharts.Options[] = [{
    chart: {
      plotBackgroundColor: 'white',
      plotBorderWidth: undefined,
      plotShadow: false,
      type: 'pie',
      height: 500,  // FIREFOX WANTS THIS !!!
    },
    credits: {
      enabled: false

    Issue solved, however, on a side note, one could also consider the advanced pie 🥧 from ngx-charts (that should be easily integrable inside any Angular component)