sharpening charts in [image-charts]

Question

We are currently rendering charts with image-charts, but we have issue since we use charts in html templates and the quality of image of image-charts deviates from the other text / images.

Currently we are rendering charts as pngs.

Answer 1

Image-Charts founder here :)

There are currently two solutions:

(free) Ask for a larger image and then let the browser downscale it

Free users can generate charts up to 999x999px. So let say you want a final chart of 450x300px.

First let's ask for a bar chart that has a chs=900x600 (thus 900x600px in size) and label font size of 16px (chxs=1N**K,333333,16%7C0,333333,16).

https://image-charts.com/chart?cht=bvg&chd=t:10,15,25,30,40,80&chs=900x600&chxt=x,y&chxl=0:%7CMarch%20'18%7CApril%20'18%7CMay%20'18%7CJune%20'18%7CJuly%20'18%7CAugust%20'18%7C&chdl=Visitors%20(in%20thousands)&chf=b0,lg,90,05B142,1,0CE858,0.2&chtt=Visitors%20report&chma=0,0,10,10&chl=%7C%7C%7C%7C+33%25%20!%7Cx2&chxs=1N**K,333333,16%7C0,333333,16

Now, embed it inside an image <img/> tag with a width of 450px and an height of 300px like so:

<img style="height:300px;width:450px;" src="https://image-charts.com/chart?cht=bvg&chd=t:10,15,25,30,40,80&chs=900x600&chxt=x,y&chxl=0:%7CMarch%20'18%7CApril%20'18%7CMay%20'18%7CJune%20'18%7CJuly%20'18%7CAugust%20'18%7C&chdl=Visitors%20(in%20thousands)&chf=b0,lg,90,05B142,1,0CE858,0.2&chtt=Visitors%20report&chma=0,0,10,10&chl=%7C%7C%7C%7C+33%25%20!%7Cx2&chxs=1N**K,333333,16%7C0,333333,16"/>

Browser downscaling while create a sharpen picture on high resolution screens.

(enterprise & enterprise+ customers) Use the retina display feature

Leverage icretina=1 and srcset, more informations here.

https://image-charts.com/chart?chd=t%3A10%2C15%2C25%2C30%2C40%2C80&chdl=Visitors%20%28in%20thousands%29&chf=b0%2Clg%2C90%2C05B142%2C1%2C0CE858%2C0.2&chl=%7C%7C%7C%7C%2033%25%20%21%7Cx2&chma=0%2C0%2C10%2C10&chs=900x600&cht=bvg&chtt=Visitors%20report&chxl=0%3A%7CMarch%20%2718%7CApril%20%2718%7CMay%20%2718%7CJune%20%2718%7CJuly%20%2718%7CAugust%20%2718%7C&chxs=1N%2A%2AK%2C333333%2C16%7C0%2C333333%2C16&chxt=x%2Cy&icac=documentation&icretina=1&ichm=5f593c1323ba799a5e3902855a25cb4d44643f84d65b8e677e7fb64c3b2cfcac