Non-Rendering Chart with Extended Width & Pixelated Chart Lines

[TylerJoaquinCrawford]

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.

[benmccann]

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?

[TylerJoaquinCrawford]

@benmccann

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:

chartWrapper.style.width = width + "px";
chartWrapper.style.height = height + "px";

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.

[benmccann]

That could possibly be related to #4874?

[etimberg]

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.

[TylerJoaquinCrawford]

@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?).

// Attribute Application
var ctx = canvas.getContext("2d");
ctx.canvas.width = width / pixelRatio;

// Styling Application
var canvas = document.getElementById("canvas");
$(canvas).attr('width', (width / pixelRatio));

@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.

[kurkle]

Disabling the clipping works around this limitation:

Chart.helpers.canvas.clipArea = function() {};
Chart.helpers.canvas.unclipArea = function() {};

https://codepen.io/kurkle/pen/mdOvNYN