New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extremely slow performance on big LineChart in IE #7725

webbkvalite opened this Issue Jan 24, 2018 · 4 comments


None yet
3 participants

webbkvalite commented Jan 24, 2018

Expected behaviour

The chart renders in about 3-5 seconds in all browsers, except IE.

Actual behaviour

IE uses about a minute to render.
Profiler reveals that 99% of the time is in function:
- nameToX
- Array.indexOf

Live demo with steps to reproduce

Product version

"dependencies": {
    "@angular/animations": "^5.2.1",
    "@angular/common": "^5.2.1",
    "@angular/compiler": "^5.2.1",
    "@angular/core": "^5.2.1",
    "@angular/forms": "^5.2.1",
    "@angular/http": "^5.2.1",
    "@angular/platform-browser": "^5.2.1",
    "@angular/platform-browser-dynamic": "^5.2.1",
    "@angular/router": "^5.2.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "@types/highcharts": "^5.0.16",
    "ajv": "^6.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.1",
    "highcharts": "^6.0.4",
    "highcharts-boost": "^0.1.7",
    "highcharts-exporting": "^0.1.7",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "lodash-es": "^4.17.4",
    "moment": "2.18.1",
    "moment-with-locales-es6": "2.18.1",
    "ng2-highcharts": "^1.1.2",
    "ng2-smart-table": "^1.2.2",
    "ngx-clipboard": "^9.1.3",
    "ngx-treeview": "^2.0.1",
    "node-sass": "^4.7.2",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"

Affected browser(s)



This comment has been minimized.


pawelfus commented Jan 24, 2018

Hi @webbkvalite

Thank you for reporting the issue. Did you consider using datetime xAxis instead of category? For a category axis, each point needs to create a category. With dates on a chart, datetime type is more natural option.

How to change category type to datetime ? Three things are necessary:

  • remove xAxis.categories if defined
  • change xAxis.type to datetime
  • add to each point x value, for example:
series: [{
  data: {
      p.x = Date.parse(;
      return p;

This comment has been minimized.


TorsteinHonsi commented Jan 26, 2018

A note on best practices.

Here's a reproduction of the chart above. It renders in 3200 ms in Chrome:

With Pawel's best practice above, it renders in 460 ms in Chrome, plus the X axis labels are more sensible:

If we add the Boost module too, we're down to 260 ms, or 1.5 sec on my Virtual Machine's IE:

If for some reason you want to keep the categories, it is much faster to define the categories directly on the X axis:

And a final note, if you just keep your current setup and set xAxis.uniqueNames to false, it renders in 280 ms:


This comment has been minimized.


TorsteinHonsi commented Jan 26, 2018

See the fix in action:

In IE, my test chart now renders in 1.9 seconds, compared to 20 seconds before the fix. In Chrome it is also significantly faster than before.

The best practices listed above still stand though.


This comment has been minimized.

webbkvalite commented Jan 30, 2018

Yes, this fixes the issue! Thank you, guys!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment