Retina support

Use retina support to generate high quality images suitable for high-DPI displays. By default, QuickChart serves charts at 2x requested pixel size so that they appear sharp on retina displays.

To disable retina support set the devicePixelRatio parameter to 1.0 (see query parameters documentation). devicePixelRatio acts as a multiplier on the width and height of your chart.

How to display retina images

Most modern smart phones, tablets, and laptops have high-DPI displays. To display retina images, you must use the srcset attribute on your <img> tag. This attribute allows you to specify multiple image URLs and their corresponding pixel densities. The browser will automatically choose the best image for the user's device.

Here's an example. The image below will always be displayed at 500x300 pixels. On a retina display, the browser will automatically request the 2x version of the image.

<img src="https://quickchart.io/chart?c={type:'bar',data:{labels:['A','B','C'],datasets:[{data:[1,2,3]}]}}&w=500&h=300&devicePixelRatio=1" srcset="https://quickchart.io/chart?c={type:'bar',data:{labels:['A','B','C'],datasets:[{data:[1,2,3]}]}}&w=500&h=300&devicePixelRatio=2 2x" width="500" height="300">

This image tag is embedded below:

It's important to set the width, height, and devicePixelRatio parameters on each image. Failure to do so will force the browser to resize the image, which may result in a blurry image especially on higher DPI displays.