chartjs / chartjs-chart-financial

Chart.js module for charting financial securities
MIT License
721 stars 196 forks source link

Dependency luxon breaks IE11 compatibility #60

Closed andrericardo closed 4 years ago

andrericardo commented 4 years ago

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 https://github.com/moment/luxon/issues/269 Issue opened to remove support to IE11 in luxon https://github.com/moment/luxon/issues/594

The error:

chartjs-chart-financial HTML1300: Navigation occurred. chartjs-chart-financial HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>". 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

benmccann commented 4 years ago

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>
andrericardo commented 4 years ago

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
benmccann commented 4 years ago

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
andrericardo commented 4 years ago

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