Non-Rendering Chart with Extended Width & Pixelated Chart Lines
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
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](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 `` element has a `position: relative` style and is in a wrapper
- The wrapper
- 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.**
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.