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?  Well, this is what we mean:


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:


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

Separator Line in a Line Chart - Left Extreme

Separator Line at the left extreme

Separator Line in a Line Chart - Right 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.


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.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 responses on “Read between the plots

  1. 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?

  2. Yolanda,
    I am afraid there is no such setting for a vLine as of now.
    What you can do though is play around with the various vLine positions as demonstrated at and then pick the one that suits your data the best.
    Vertical Trendline – We have a vertical trendline only in the bubble and scatter charts.
    FusionCharts Team

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards