Axis visibility is now 100% compliant with Google Image Charts

Axis labels policy and default axis visibility for line (ls, lc, lxy), bar charts (bvs, bhs, bvg, bhg, bvo) is now exactly the same as Google image Charts.

My chart does not have the axis it used to be, what should I do?

Leverage the chxt axis visibility parameter, a good starting point would be to add chxt=x,y to your URL.

Axis labels rotation is now horizontal by default

To better mimics Google Image Charts behavior, axis labels will be horizontal (not rotated) by default on Image-Charts v5.

image-charts v5

I like my label rotated, what should I do?

We've got your back, leverage max{degree} and min{degree} from axis label style parameter (chxs).

E.g. chxt=x,y&chxs=0,max45 define that the first axis (here it would be the x axis, see chxt) labels should have a max rotation of 45°.

My chart is not that large and now I've got overlapping labels, what should I do?

Please leverage the auto label skip feature to let our render engine skip the extraneous labels.

E.g. specify chxt=x,y&chxs=0,s where 0 reference the first axis (here it would be the x axis) declared in chxt.

Axis ranges (chxr) and axis visibility (chxt) are now globally interpreted

Our support for axis range and visibility had some bugs and it was not implemented for every type of charts and inconsistently. Axis ranges behavior is now supported and consistent between line, bar and bubble chart.

If no chxr is defined Image-Charts will display your chart based on your actual data.

Google Image Charts made a distinction between axis range and actual chart dataset (e.g. Google Image Charts displayed [0;100] axis range not considering the dataset values where between [0;30] and faking), since our first day it's the only non API-compatible choice we made because we deeply think it's way harder to use.

I prefer when my axes went from 0 to 100, what should I do?

If your chart has chxt=x,y then append a chxr=0,0,100|1,0,100 to retrieve past behavior.

I already use chxr, what should I do?

Since we've fixed bugs related with our implementation of chxr, you might have some issues since we are not strictly following what's described inside our documentation.

Search inside your code for usage of chxr and check that your charts render correctly with our latest release.

Removed chl undocumented behavior that acted as axis labels

Using chl for defining axis labels in bar and line charts was an undocumented behavior both in Image-Charts and Google Image Charts.

To improve our API consistency Image-Charts v5 remove this undocumented and unsound implementation. Line, bubble and bar charts now only use chxl for custom axis labels

As stated in our documentation and Google Image Charts documentation:

I used chl for axis labels what should I do?

Please use custom axis labels (chxl) instead.

E.g. changing chl=a|b|c to chxl=0:|a|b|c should be enough most of the time.

[Enterprise+] Retina support in gif animation

Good news!

On top of our gorgeous retina-compatible (&icretina=1) generated charts you are now able to make them animated as well (&chan=1200,easeInOutCubic).

It's the perfect time to impress your customers with animated email reports!

gif animated static chart

Negative margins

Negative margins are now supported, see chma documentation.

Retina support improved

We revisited our retina display support that we released a month ago.

Image-Charts latest version is now completely coherent regarding text sizes (axis labels, chart titles, ...).

Compound charts and line markers

Long awaited, compound charts and line markers are now supported!

You can now add lines to bar or line charts to highlight trends 📈:

🤩 Retina support

Retina is a marketing term coined by Apple that refers to devices and monitors that have a resolution and pixel density so high — roughly 300 or more pixels per inch – that a person is unable to discern the individual pixels at a normal viewing distance 🤓.

In order to generate beautiful charts for these Retina displays, Image-Charts supports a retina mode that can be activated through the icretina=1 parameter. If the chart URL contains icretina=1 parameter, the generated chart output will have its width and height size doubled.

We recommend the use of srcset HTML image attribute in order to send the high-resolution image chart version only to retina devices and standard resolution for others, thus reducing bandwidth usage.

Learn more about Retina

Retina support is only enabled in Enterprise+ subscriptions.

[Enterprise] More robust URL signatures

In order to be easier to handle, Image-Charts now checks the signature for both encoded and decoded query params.

Until now, our HMAC signature check was only based on the encoded URL. However, the resulting URL was sometimes decoded and encoded by various intermediate transportation layer (e.g. webmail proxies, automation pipeline and so on).

Now Image-Charts will also check the signature against the decoded URL version in order to be URL-encoding algorithm-proof.

You do not need to worry about generating a string of the whole query with the right URL-safe characters anymore, if the basic query string check does not work, Image-Charts will also try to decode every query parameter pairs and then check the resulting query string against your signature (ichm).

Generating a signature based on unencoded URL parameters is the recommended way as it's much more robust and abstract away the encoding the transportation uses (e.g. webmail proxies, web-browsers, enterprise proxies).

Learn more with our updated code examples