Image Appearance & Animations

How to customise image appearance and animations in pie and column charts

1 First watch our 'Images Preloading from Assets' knowledge base article that will introduce you to the 'Idonix - Image Cache'. Note: Below 'Preloaded Images', that in addition to 'Project Images', there is also 'External Image Urls'
It will also introduce you to "ImageKey" within JSON Data.
Here
NOTE: The TEAM images are 512x512 - i.e. square aspect.

Default 'Section Label Image Settings'

2 The square aspect, transparent PNG images are stretched to fit the default image plane setting for the pie chart, which is using a glass background. With the PieChart selected, within 'Details', below 'Configuration', below 'Section Label Settings' and below 'Section Label Image Settings' - we can see the default settings.

'Section Label Image Settings' changes to place it beside rather than above its label

3 Change some settings: the 'Material', the 'Image Width' (512) & the 'Image Height' (512).
Change the 'Image Backdrop Scale' (X:1.0, Y:20.0 & Z:20.0).
Change the 'Image Backdrop Location' (the image is positioned relative to the backdrop and the backdrop is positioned relative to the Section Label) I.e. X:0.0, Y:-25.0 & Z:0.0.
Change the 'Image Scale' to fit the new dimensions of the backdrop (0.6)

Image Backdrop In Animation > Effects > 'Scale Z' & 'Location Z'

4 With the PieChart selected, within 'Details', below 'Animations', below 'Section Label Animations Settings' - we can see the default settings. First looking at the 'Image Backdrop In Animation', it has two 'Effects' (in addition to the 'Animation Speed' & the 'Animation Curve'): 'Scale Z' & 'Location Z'.

Image Backdrop In Animation > Effects > 'Scale Y' & 'Location Y' (change value from -27.5 to +10)

5 Change the 'Effects' for the 'Image Backdrop In Animation' to Scale Y & Location Y. Changing the 'Animate From' to: 10.0 (rather than -27.5).
That is the backdrop done, now to change the 'Image In'

Image In Animation > Effects > Mode - change it from 'Slide Vertically' to 'Slide Horizontally'

6 Change the 'Image In Animation' from 'Mode: Slide Vertically' to 'Mode: Slide Horizontally'