Chartjs-Chartjs v2 on retina display has label size issue (text is too large)

by

2👍

✅

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);

Leave a comment