question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Highcharts module doesn't work properly in Firefox

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:9

github_iconTop GitHub Comments

2reactions
Wandangcommented, Jun 28, 2017

@maximebourdel try this css

chart {
  display: block;
}
1reaction
annbabucommented, Nov 16, 2017

Yes perfect solution.Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to load chart in Mozilla firefox - Highcharts
I am using Angular in my project to generate graphs using Highcharts module and facing issue on first load in Mozilla Firefox, ...
Read more >
Chart Rendering Problem in IE 11/Edge/Firefox - Highcharts
I'm producing a report which includes several SVG charts generated by Highcharts. One of the charts is a stacked column chart (see ...
Read more >
chart not displaying in IE10 and Firefox but is in Chrome
Hello, I have three pages that display a Highstock chart, two of which display on all three of the browsers I mentioned but...
Read more >
what's wrong about panning in Firefox? - Highcharts
Hi illman, I tested demo that you provided and in both, Chrome and Firefox, chart works fine. Maybe cause for slow panning is...
Read more >
Highcharts Rendering Super Slow in Firefox and IE11
in Firefox. Am I using the boost module properly? ... reserveSpace: true } }, yAxis: { tickPositioner: function() { let positions = [];...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found