chartjs/chartjs-chart-financial

Dependency luxon breaks IE11 compatibility

andrericardo opened this issue · 4 comments

Wanted to make you aware that luxon does not seem to be IE11 compatible. I also wish I did not had to support IE11 but working in an enterprise environment where this is still the default browser set by IT even in new Windows 10 machines. One of the reasons to have chosen chart.js was the stated IE11 support while still making great looking charts.

The examples in https://www.chartjs.org/chartjs-chart-financial/ throw an error in the console and don't show the chart.

luxon seems to be on the way to remove support for IE11
A similar issue to the error in luxon moment/luxon#269
Issue opened to remove support to IE11 in luxon moment/luxon#594

The error:

chartjs-chart-financial
HTML1300: Navigation occurred.
chartjs-chart-financial
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "".
chartjs-chart-financial (1,1)
SCRIPT438: Object doesn't support property or method 'assign'
luxon@1.15.0 (1,28835)
SCRIPT5007: Unable to get property 'DateTime' of undefined or null reference
index.js (41,2)

VirtualBox_Win10_08_10_2019_22_57_19

This library does not require Luxon. You can use Moment instead

However, the sample should work if you add the required polyfill for Luxon:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign"></script>

I've tried to replicate the issue with the luxon code called from the example in chartjs-chart financial using the polyfill with

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@1.19.3/build/global/luxon.js"></script>
<script type="text/javascript">
var dateStr = '01 Apr 2017 00:00 Z';
var date = luxon.DateTime.fromRFC2822(dateStr);
console.log(date);
</script>
</head>
<body></body>
</html>

Ran into another set of errors

Screen Shot 2019-10-08 at 23 38 08

If you're not able to get Luxon to work, the other method would be to use Moment.

Remove:

<script src="https://cdn.jsdelivr.net/npm/luxon@1.15.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.1.1"></script> 

Add:

https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js

Thank you for your help @benmccann, I was not aware that luxon was needed in dev for the examples not for chartjs-chart-financial.