Dynamic Resizing of Image Annotations

FusionCharts Suite XT supports macros for dynamically positioning annotations on a chart w.r.t the chart elements like the canvas, the datasets, the axes, the caption, the legend, and so on. For example, the macro '$captionStartX' will position the annotations w.r.t the starting x-coordinate of the chart caption. Considering that macros take values at runtime, they are an ideal option if you are building a chart that will be modified dynamically. Using macros enables the annotations to be resized relative to the chart and its elements.

The column 2D chart below shows a comparison between the revenue generated by five store managers in the previous quarter. Instead of using the store managers’ names as the x-axis labels, their images have been used as annotations to identify the data plots. Adding image annotations increases relatability, while also increasing the visual appeal of your chart.

The chart is rendered with buttons to dynamically resize the chart area as well as reset it to its original values.

An important feature showcased in this fiddle is the positioning of the annotations using macros. Macros are predefined variables that assume values at run-time. Therefore, when the chart is dynamically resized, the annotations are resized accordingly. Click here to read more about the macros used to dynamically position annotations.

Loading...
FusionCharts
Resize Chart Area :


The chart below compares the sales of the top four chocolate brands in a year. Although this is a column 2D chart, instead of the conventional data plots, pictures of the actual chocolate wrappers have been used as image annotations. This not only increases the aesthetic appeal of the chart, but makes it more relatable, more intuitive for its audience. What’s more is that the image annotations are scaled proportional to the sales figure (the y-axis value). One look at the chart, and you know what it is all about!

The chart area can be dynamically resized using the resize and reset buttons rendered below the chart.

The annotations in this chart are positioned using annotation macros, which allows them to be resized proportionately with the chart when it is dynamically resized. Macros take values at run-time, a feature which enables annotations to be repositioned in accordance with the chart. Click here to read more about the macros used to dynamically position annotations.

Loading...
FusionCharts
Resize Chart Area :