Chartjs V2 On Retina Display Has Label Size Issue (text Is Too Large)

I'm using chart.js with the latest v2.7.1 release. I followed this jsfiddle example for creating a fixed Y-Axis effect when scrolling. It works great but there is one issue with Re

Solution 1:

I also ran into this issue, the original fiddle works well except that it is not responsive.

The key is that the original fiddle does not take into account the devicePixelRatio the same way as the chart using the helpers.retinaScale method from ChartJS core.

After several hours of fiddling, here is the surprisingly simple answer: https://jsfiddle.net/4ydfo4xo/

When copying the scales from the original chart, the devicePixelRatio must be applied to the sourceWidth and sourceHeight arguments of drawImage

Specifically the pixel ratio is accessed using

var pixelRatio = myLiveChart.chart.currentDevicePixelRatio;

and then the drawImage arguments are changed..

targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * pixelRatio, copyHeight * pixelRatio, 0, 0, copyWidth, copyHeight);