Highcharts line chart won't display line chart in IE

Question

... but of course it displays perfectly in all other browsers, and of course only IE matters.

I'm aware this type of question has been asked multiple times, but I've gone through this code definition backwards & forwards and I cannot see where there might be any errors. These are the options passed to my highcharts chart object. I don't see any stray commas or data that shouldn't be there. Any help here would be greatly appreciated -- thanks!

title: {
      text: ''
    },
    tooltip: {
                pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.x:%B %Y}: <b>{point.y}</b><br/>'
    },
    subtitle: {
      text: ''
    },
    xAxis: {
                type: 'datetime',
                title: {
        enabled: true
      },
      labels: {
                    format: '{value:%b %Y}'
                },
      tickLength: 0
    },
    yAxis: {
      title: {
        text: 'Risk Score',
        margin: 50
      },
      max: 25,
      min: 0
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 150,
      itemMarginBottom: 5,
      margin: 15,
      itemStyle: {
                    color: '#337ab7'
      }
    },
    plotOptions: {
      series: {
                    lineWidth: 0,
                    events: {
                        legendItemClick: function (event) {
                            _this.send('chartElementClick', event.target.userOptions.id, event.target.userOptions.name);
                        }
                    },
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              _this.send('chartElementClick', this.options.id, this.options.name);
            }
          }
        },
        marker: {
            enabled: false
        }
      }
    }

EDIT: lineWidth is 0 in plotOptions because I set it manually to be different values for different lines in each individual series, this is NOT the issue, as I said the lines appear just fine in other browsers. Thanks for the clarification @ppotaczek

EDIT 2: Here is an example of one of the data sets. They are all analogous to this. This is copy-pasted from Chrome dev-tools :

data: Array(13)
0: {x: 1531800000000, y: null, id: 1, name: "Super New Risk Guy"}
1: {x: 1534478400000, y: null, id: 1, name: "Super New Risk Guy"}
2: {x: 1537156800000, y: null, id: 1, name: "Super New Risk Guy"}
3: {x: 1539748800000, y: null, id: 1, name: "Super New Risk Guy"}
4: {x: 1542430800000, y: 1, id: 1, name: "Super New Risk Guy"}
5: {x: 1545022800000, y: 8, id: 1, name: "Super New Risk Guy"}
6: {x: 1547701200000, y: 8, id: 1, name: "Super New Risk Guy"}
7: {x: 1550379600000, y: 4, id: 1, name: "Super New Risk Guy"}
8: {x: 1552795200000, y: 13, id: 1, name: "Super New Risk Guy"}
9: {x: 1555473600000, y: 14, id: 1, name: "Super New Risk Guy"}
10: {x: 1558065600000, y: 8, id: 1, name: "Super New Risk Guy"}
11: {x: 1560744000000, y: 8, id: 1, name: "Super New Risk Guy"}
12: {x: 1563336000000, y: 8, id: 1, name: "Super New Risk Guy"}
length: 13
__proto__: Array(0)
id: 1
lineWidth: 3
marker: {fillColor: "#FF9D9D"}
name: "Super New Risk Guy"

EDIT 3: Also there are NO console errors at all in the IE version of dev-tools when I load the page.

EDIT 4: Here is the code I use to generate the data sets. It's nothing magical :

let dataArray = A();

    let startMonth = this.get('model.queryParams.from_selected_month');
    let trendMonthData = this.get('model.reportData.trend_data');
    let categoryThresholds = this.get('model.reportData.category_thresholds');

    //set charting data
    if (trendMonthData && trendMonthData.length > 0) {
            trendMonthData.forEach((trendMonthDataList, monthIndex) => {
                trendMonthDataList.forEach((trendDataObj) => {
                    let currentTrendObj = dataArray.find((trendObj) => { return parseInt(trendObj.id) == parseInt(trendDataObj.id); });

                    if (currentTrendObj !== undefined) {
                        currentTrendObj.data.push({ x: addMonths(startMonth, monthIndex).getTime(), y: trendDataObj.score, id: trendDataObj.id, name: trendDataObj.name });
                    } else {
                        dataArray.pushObject({ id: trendDataObj.id, name: trendDataObj.name, lineWidth: 3,
                                                                    data: [{ x: addMonths(startMonth, monthIndex).getTime(), y: trendDataObj.score, id: trendDataObj.id, name: trendDataObj.name }], marker: { fillColor: '#FF9D9D' }});
                    }
                });
      });

            if (Object.keys(this.get('model.reportData.category_thresholds')).length !== 0) {
                let upperThresholdLineData = { name: 'Upper Threshold', data: [], showInLegend: false };
                let lowerThresholdLineData = { name: 'Lower Threshold', data: [], showInLegend: false };
                upperThresholdLineData.data.push([addMonths(startMonth, 0).getTime(), categoryThresholds.upper_threshold]);
                upperThresholdLineData.data.push([addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.upper_threshold]);
                lowerThresholdLineData.data.push([addMonths(startMonth, 0).getTime(), categoryThresholds.lower_threshold]);
                lowerThresholdLineData.data.push([addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.lower_threshold]);
                dataArray.pushObject(upperThresholdLineData);
                dataArray.pushObject(lowerThresholdLineData);

                let thresholdRange = { name: 'Threshold Range',
                                                            type: 'arearange', 
                                                            color: '#C7F3D4',
                                                            zIndex: -999,
                                                            data: [[addMonths(startMonth, 0).getTime(), categoryThresholds.lower_threshold, categoryThresholds.upper_threshold], 
                                                                        [addMonths(startMonth, (trendMonthData.length - 1)).getTime(), categoryThresholds.lower_threshold, categoryThresholds.upper_threshold]], 
                                                            showInLegend: false };

                dataArray.pushObject(thresholdRange);
            }
    }

and then I simply render it with a highcharts helper :

{{high-charts chartOptions=chartOptions content=chartData}}

Answer 1

In case anyone is interested :

It was this custom function that I made : addMonths(startMonth, monthIndex) which caused all the problems. There was absolutely no output from IE for me to know this was happening, it took a lot of elbow grease to figure it out. Instead I just installed moment.js and used this function instead to increment months, and display the value in milliseconds which highcharts will respect :

moment(startMonth, "YYYY-MM-DD").add(monthIndex, 'months').valueOf()

Note that the extra parameter with the date-format needs to be specified, or, once again, this will work in all browsers EXCEPT IE.