Ngx-charts: Charts don't work in IE11

[72gm]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Charts don't work in IE (tested in IE11)

Expected behavior
Charts would work in IE11 at least

Reproduction of the problem
Run your samples in IE11 and you get the same issue. I am using the classlist.js polyfill but this doesn't seem to fix it

What is the motivation / use case for changing the behavior?
As a web developer I would expect the charts to work in IE11

Please tell us about your environment: Windows, IE11

• ngx-charts version: 4.1.2
• Angular version: 2.4.7

[HitomiTenshi]

Try including the es6 polyfill first, and then the classList polyfill. Mine worked with those, at least when using the line chart. I don't know about other chart components.

[72gm]

I've tried it with es6, classlist, then array-includes. I then replaced es6 with corejs as it is recommended to use this instead of the es6-shim... still same error!

Can you post your includes so as I can check I've got the correct ones???

Thanks

[HitomiTenshi]

Get core-js and classList.js and use these includes in your index.html header:

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/classlist.js/classList.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<!-- Bootstrapping scripts -->
<script src="systemjs.config.js"></script>

I installed classList.js with npm install eligrey/classList.js --save since I couldn't find an official npm package of it.

[72gm]

Hi,

I've got it to work today somehow! I removed anything to do with classlist then started again, this time using the classlist-polyfill

npm install classlist-polyfill

and in my index page

<script async src="../assets/scripts/shim.min.js" ></script> <!--Core js polyfill-->
<script async src="../assets/scripts/index.js"></script> <!--classlist-polyfill-->

Why this works when its the same code I have no idea???

Bizarrely I did get an error on the line chart (which I'm not using so haven't looked into as I don't really care!!)

[marjan-georgiev]

@72gm or @HitomiTenshi, either of you guys willing to PR this into the demo page, and document it somewhere please?

[72gm]

happy to help but I'm new to git/open source so I don't really know what you mean or how I would do that??

[benitocyrille]

sorry but i have a similar issue wit IE11, my chart displays well on Chrome and Mozilla some advises please

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';

ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'contains'
TypeError: Object doesn't support property or method 'contains'

[legend]="showLegend" [autoScale]="autoScale" [timeline]="timeline" [roundDomains]="roundDomains" (select)="onSelect($event)">

[HitomiTenshi]

I have the same problem, even though I'm using eligrey/classList.js. It happens with Angular versions higher than 4.1.3.

Try using Angular 4.1.3 for now if you need IE11 support. It seems to work. Make sure you also use eligrey/classList.js.

[yodamad]

make it works with this polyfills.ts

`import 'core-js/es6';
import 'core-js/es7/array';
import 'core-js/es7/reflect';
import 'core-js/client/shim';
import 'classlist.js';
import 'intl';
require('zone.js/dist/zone');

// IE11 fix
if (typeof SVGElement.prototype.contains == 'undefined') {
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}`

[milleraundra]

@yodamad Thank you! I was working with stacked horizontal bar chart and it wasn't showing up in IE11. Adding the es7/array, classlist.js, and the SVG Javascript was the solution!

[amcdnl]

I added the svg contains to core, it will be in the next release

[svsgdev]

@amcdnl - any idea when the next release will come out ?

[Nagendra82]

ngx-charts (in angular8 ) is not working in IE11 it's showing a white page

i have made the changes in polyfills.ts
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.
// IE11 fix
// Ref: https://github.com/swimlane/ngx-charts/issues/386
if (typeof SVGElement !== 'undefined' && typeof SVGElement.prototype.contains === 'undefined') {
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}
also i have chek your demo https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical is not working in IE11.
anyone has any idea.