Non-Rendering Chart with Extended Width & Pixelated Chart Lines

Hey all -- I'm having a responsive: true Chart width issue that is similar to all the scenarios in Issue #56 . I've attempted implementing several of the stated solutions, but have had no luck so far. Does anyone have suggestions?

Issue:

• After a certain pixel width, the Chart no longer renders. For me, that break point is around and above 19,000 pixels wide.
• The Chart Lines get pretty darn blurry the wider the chart.
• Here's a CodePen showing my issue: https://codepen.io/tcraw/pen/bYdMrN
• (I'm not actually using JQuery in my app code -- just used it because I was being lazy. Just needed a quick replication scenario.)

My Current Requirement:

• Draw a Line Chart that matches up with a table of data below it (we want to scroll the table and see the correlated data plots on the line chart -- the table headers / x-axis labels are dates. This of course means matching the Chart width with the width of the table dynamically (the table may contain up to 1.5 - 2 years of dates).

Chart Configuration:

• Using ChartJS version 2.7.0
• The <canvas> element has a position: relative style and is in a wrapper .
• The wrapper has a width: 100% style.
• The Chart Options have var lineGraphOptions = { responsive: true, maintainAspectRatio: false, etc... } settings.
• I am calling new Chart(lineCtx, { type: 'line', data: lineGraphData, options: lineGraphOptions }) in an angular $timeout function so I can grab the actual width of the table once the data lookup occurs and the table is rendered.

Environment:

• Chrome (61)
• Firefox (56)
• Edge (40) --- Edge renders the chart despite a high pixel width, and also provides crisp chart lines! However, the chart is still getting cut off at a certain point.