Categories: Tutorials

Custom String Labels and Data Set Annotations Explained

Continuing with the series on how to get the most out of the new features of FusionCharts v3.1, here’s our latest – custom string labels (annotations) for individual data sets. In case you tuned into the series just now, here’s what we have already covered:

Back to the topic at hand – custom string labels. Let’s call them annotations for the sake of brevity. Annotations make a chart more information-intensive, thus enhancing decision-making. Let’s look at an example before we dive into the details:

See how neatly we have appended the labels “Birthday Discount – 30%” and “New Website” to explain the increase in sales for March and May respectively. And the XML going behind this is no rocket science either:

<chart caption="Monthly Sales for Jan-Jun 2008" useroundedges="1" numberprefix="$" bgcolor="”FFFFFF”" decimals="0">
</chart>

All of what you need to do is just over-write the default display value with your own text, using the displayValue attribute. And because we over-wrote the default display value for the data sets, we had to put in the figures $60K and $58K manually.

Without annotations, you would have a chart with only the sales figures plotted in it and every time you wanted to know why a particular month showed an increase or decrease in sales, you would have probably referred an Excel file which had all these details. But with annotations, all of the information that you need for your decision-making comes neatly packed as a whole – so not only can you make decisions backed with concrete numbers, you can make them much faster now.

While the example shown above is a very clichéd one, there are a multitude of other places that you can use it too – website stats with annotations like “Increased Page Rank” or “System Maintenance”, company expenditures with annotations like “Pizza Day” or “The Big Party” or even in your personal weight chart with “The 10K Run” or “The Free Booze Night.”

sanket

Recent Posts

Dashboard Design Best Practices: 12 Tips for Building Effective BI Dashboards

A well-designed dashboard helps users understand complex data quickly, monitor key performance indicators, and make…

1 day ago

What Are the Top Commercial Chart Solutions That Support the Nuxt Framework?

Quick Answer: The best commercial chart libraries for Nuxt include FusionCharts, Highcharts, AnyChart, amCharts, ApexCharts,…

2 days ago

How to Integrate Interactive Charts in Vue 3 Applications (Step-by-Step Guide)

Quick Answer To integrate interactive Vue charts into a Vue 3 application, first create a…

1 week ago

What Is the Best Vue Chart Library for Interactive Data Visualization in 2026?

If you're looking for the best Vue chart library for interactive data visualization, there isn't…

2 weeks ago

How to Integrate React Graphs with JS Grids (2026)

Modern web applications generate and display more data than ever. They create from business dashboards…

4 weeks ago

Interactive Dashboards: Types, Benefits, Examples & Best Practices (2026)

Businesses collect data from multiple sources every day, including sales platforms, marketing tools, customer support…

4 weeks ago