Highcharts module doesn't work properly in Firefox

GrizzlyProgrammer commented 7 years ago

Hello everyone. I'm trying to show a chart with info in my angular2 application. The detail is, it's shown properly in Chrome, but it's cut in half in the table name section in Firefox. I can assure it's not a CSS problem, since there is no "white empty window" overlaying the table.

This is the code I have related to it, should it come in handy.

app.module.ts

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'highcharts';

export function highchartsFactory() {
    const highcharts = require('highcharts');
    const highChartsMore = require('highcharts/highcharts-more');
    const solidGauge = require('highcharts/modules/solid-gauge');
    ChartModule.forRoot(require('highcharts'),
      require('highcharts/highcharts-more'),
      require('highcharts/modules/solid-gauge'));
    return highcharts;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule, 
    TreeModule,
    Ng2TableModule,
    ChartModule.forRoot(require('highcharts')),
    RouterModule.forRoot(appRoutes)
  ],
  providers:[
      {
          provide:HighchartsStatic,
          useFactory: highchartsFactory
      }
  ],
  bootstrap: [AppComponent]
})

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-flowchart',
  templateUrl: './flowchart.component.html',
  styleUrls: ['./flowchart.component.css']
})
export class FlowchartComponent implements OnInit {

    constructor() { 
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 1502.5, 106.4, 769, -153, 204],
            }]
        };
    }
    options: Object;

  ngOnInit() {
  }

}

app.component.html

<chart [options]="options"></chart>

Additional info

Even when I'm able to ng serve and take a look at it in localhost, when I deploy it via Jenkins, it throws the famous:

ERROR in Error encountered resolving symbol values statically. Calling function 'ChartModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /opt/src/app/app.module.ts, resolving symbol AppModule in /opt/src/app/app.module.ts

Wandang commented 7 years ago

could you provide a screenshot of the mangled chart? I had a similar issue with firefox (chrome worked fine). My height of the chartarea was 16px or something. I fixed that issue and can look it up in our git log if it is the same.