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:
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.
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 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.
As for cosmetics, some of the things that you can do are:
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.
You can build complex web applications easily with Angular. But it’s a challenge to present…
JavaScript charts help transform raw data into clear, interactive visualizations that users can easily understand.…
Modern web applications depend on data visualization to transform complex information into clear, actionable insights.…
Data is a big part of modern software. Companies use charts to track sales, monitor…
Every day, businesses get more data than ever before. Looking at endless rows and columns…
Building interactive React charts from scratch can quickly become complicated. It becomes even more challenging…
View Comments
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 https://www.fusioncharts.com/docs/Contents/AttDesc/VLines.html 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.
Regards,
Sanket
FusionCharts Team
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?