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

Question

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

and from firefox

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?)

score 1 · Accepted Answer · 2021-04-25T18:23:28.753

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)

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

1 Answers1