New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Non-Rendering Chart with Extended Width & Pixelated Chart Lines #4909
Comments
There was at least one issue related to responsiveness that was fixed in 2.7.1. Can you update the codepen to 2.7.1 and confirm if it's still an issue? |
Definitely -- I just updated the CodePen to the .../2.7.1/Chart.js CDN and no dice unfortunately. Updated CodePen Link: https://codepen.io/tcraw/pen/bYdMrN Also I should mention that I am applying the width to the chart wrapper style:
If I apply styling or attribute sizing to the canvas directly, it will only fill 100% of the viewport no matter the overflow setting*. (Perhaps I'm just missing some simple css rule to deal with that, but I thought it worth mentioning.) *I want it to overflow for horizontal scrolling. |
That could possibly be related to #4874? |
My gut on this is that something is hitting the limits of canvas draw APIs. As far as I know, nothing we've written has a max size hardcoded anywhere. As an aside I've seen this in various browsers with SVG before. For instance, on Safari is a horizontal line of an SVG path is longer than 4096 screen pixels (not css pixels) it fails to render past the 4096th pixel. |
@benmccann Looking at #4874, I assume that there was possibly a discrepancy applying height/width styling directly to a canvas -- I did actually try both applying styling as well as trying to change the canvas width attribute and received the same results (unless I was targeting incorrectly?).
@etimberg I think that may be the situation -- that the canvas draw API may be enforcing a pixel limit (though I haven't confirmed by looking at the HTML5 Canvas docs). You can actually see the picture a bit clearer by running my Codepen in Edge: It seems to approach the rendering a bit differently than Chrome or Firefox -- rather than just not rendering if its width limit is hit, it renders only what it can up to a cut-off point. |
Disabling the clipping works around this limitation: Chart.helpers.canvas.clipArea = function() {};
Chart.helpers.canvas.unclipArea = function() {}; |
As of 3.4.0 |
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:
My Current Requirement:
Chart Configuration:
<canvas>
element has aposition: relative
style and is in a wrapperwidth: 100%
style.var lineGraphOptions = { responsive: true, maintainAspectRatio: false, etc... }
settings.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:
The text was updated successfully, but these errors were encountered: