In these particular charts, there is only one non-zero datapoint in each data set. The expected behavior is for all data points to be zero (at the bottom of the chart) and a single data point in each data set at the right side of the chart. This should result in a simple “triangle” shape as follows:
Additionally, here is an animated gif demonstrating the “load” functionality at a specific responsive width that works without issue. Everything looks good:
At certain responsive widths, the chart renders correctly. However, at other widths, an extra area is drawn from the first data point. As you can see from the “hovered” data point, ChartJS seems to be aware of the correct data points, but the actual colored area on the chart does not match up with the data:
Here are some animated gifs demonstrating the issue. First, resizing the window through various responsive widths demonstrates the chart changing between correct and incorrect rendering states:
Additionally, here is an animated gif demonstrating the “load” functionality at a specific responsive width that has issues. You can see strange glitching as the chart animates:
I’m not sure what the problem is. It’s odd that the chart displays correctly at some widths, but at other widths does not.
Steps to Reproduce (for bugs)
I haven’t created a public reproduction yet. If this does, indeed, look like a new bug, I can provide access to our password-protected app for inspection or try to set up a separate reproduction case.
These rendering errors cause misleading visualization of data in ChartJS.
- Chart.js version: 2.7.1
- Browser name and version: Chrome 66, Firefox 59 (all on on macOS 10.12.6)
- Link to your project: Private password-protected portal, access can be provided for inspection if necessary