Categories: Tutorials

Read between the plots

You’ve successfully completed the first six months at your new job as a marketing specialist and the time has come to reveal how you leveraged your ideas for the benefit of the company. So, you make a Revenue chart and tell yourself: “These high-rise things are my contribution.” But you can’t tell this to your superiors without seeming boastful. So what do you do? Simple – just make your charts do the talking by forcing your superiors to read between the plots. Wondering what we are talking about?  See, how the vertical separator line with its neatly appended label comes to your rescue. Your superiors can now read between the plots and appreciate your contribution to the company. And, doing this just requires a little tweaking of the XML. In case the above example doesn’t apply to you, here are some others which just might:
  • Marking out the dull seasons (and peak season too): So you run a gift shop; or sell clothes, chocolates, flowers or anything else. And, it is time to present the annual sales records to fellow stake holders, but you are worried how they’ll react to the short spell of low turnover. Well, just plot a chart and indicate the periods of dull season with the help of labeled separator lines. Its likely that after seeing the chart your partners will not ask for an explanation.
  • Indicating transition in a time series chart: Almost everyone has had to deal with this situation at some point of time or the other. What do you do when you are plotting data from October 2008 to June 2009 and you want to ensure that the intended audience doesn’t lose track of when 2008 makes way for 2009?  Or, you might want to highlight some aspects related to the data that have undergone a change with the onset of the new year, aspects such as increased budget or decreased manpower.  Again, vertical separator lines are just the thing you need.
Now that the uses of the separator line have been brought out pretty well (or so we think), let’s talk about what can be done to the separator line itself.

Customizing the separator line

Just like everything else in FusionCharts, separator lines can be  customized with  great deal of intricacy. Innumerable variations of separator lines are possible, here are some things that you can play around with:

Position

If you don’t want the vertical line to appear between the data plots, then you can shift it to either extremities.

Separator Line at the left extreme

Separator Line at the right extreme

You can also play around with the label and place it either at the top of the vertical line or at the bottom.

Cosmetics

As for cosmetics, some of the things that you can do are:
  • Make the vertical line dashed.
  • Change the color (obviously), thickness and the transparency of the vertical line.
  • Play around with the border of the label
You can take a look at how to go about with the customizations in our documentation on vertical lines here. We are pretty close to the end of the “How to get the most out of v3.1” series. Coming up next is a comprehensive look at smarter tooltips. We will discuss how tooltip text can be broken down into multiple lines with the help of auto-wrapping and forced line breaks. Following that would be the last and final post of this series that will take a look at how FusionCharts and Javascript can be combined to render a powerful charting experience. Let us know what you would like us to cover once we get done with the series, and we will be glad to get on with it right away.
sanket

View Comments

  • I'm using vline with a combination chart (containing both bar and line graphs), but the line is rendering under the other components instead of on top of them. How can I fix this? I know that trendlines have the showOnTop setting; is there a similar setting for vline? Or do I need to use a vertical trendline instead?

Recent Posts

Top Pie Chart Makers to generate statistical data in 2025

To create pie charts and generate statistical data, you’ll find this list of the best…

7 months ago

How to implement FusionCharts in a dynamically resizing flexbox layout

To implement FusionCharts in a dynamically resizing flexbox layout, ensure that the chart's dimensions are…

7 months ago

Elevating Data Visualization: FusionCharts Achievements

At FusionCharts, we believe in empowering developers and businesses with cutting-edge data visualization tools that…

9 months ago

Pie Charts: A Slice of Data You Can’t Ignore

Ever had a data set that seemed more complicated than a Rubik's cube? You’re not…

1 year ago

Venn Diagrams: A Simple Yet Powerful Tool for Visualizing Relationships

We’ve all seen them in textbooks or presentations—those overlapping circles that simplify complex information into…

1 year ago

Announcing FusionCharts v4.1: Elevate Your Data Visualization Experience!

We’re excited to announce the upcoming release of FusionCharts v4.1—a groundbreaking step forward in the…

1 year ago