randomnuggets

Annotations in the plot area mask rollover/rollout events

Recommended Posts

I have a 2D bar chart. Each bar on the bar chart has an annotation. Each annotation is positioned directly on top of each horizontal bar.

I also have tool tips configured on each bar.

If I rollover/rollout the mouse on an annotation, it prevents any rollover/rollout events firing on the underlying bar. The tool tip disappears. The mouse event is processed by the annotation only.

Is there a way I can pass the rollover/rollout event through to the data plot, so that the tool tips still work?

Thanks.

Share this post


Link to post
Share on other sites

Hi,

 

The annotation is placed over the data plots(bars), hence it is on top of the bar, and the bar is behind the annotation. Hence the data plots(bars) tooltip will not appear when the mouse is over the annotation items.

You can set the "showBelow" configuration attributes within the "groups" object of the dataSource to "1" to set the annotations behind the data plots.

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Hi Akash,

You have correctly described the problem that I need to solve.

However, it is not an option for me to place the annotation behind the data bar. Doing so would obscure the annotation.

Effectively, I need a way to place a text string directly on a data bar, and still have tooltips work, even when the mouse is positioned over the text string.

How do I do this with FusionCharts?

If use an annotation, can I "bubble-up" mouse events from an annotation to a data bar? How?

Thanks.

Share this post


Link to post
Share on other sites

Hi,

 

You can use the "displayValue" configuration to show your text on the bar plots instead of displaying annotations to avoid this scenario. Check this sample for reference :

http://jsfiddle.net/sj32meub/1/

 

Documentation link for reference : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-values#configure-text-labels-instead-of-numeric-data-values

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Hi Akash,

Thank you for that fiddle and link to doco.

"displayValue" is a similar idea to what I need, however I believe the position of the text on the bar cannot be controlled (other than inside or outside). Is that right?

Annotations, on the other hand, have powerful positioning logic and macros that let me place the text anywhere. For example it can be placed at the left-hand end of the bar.

So it appears that I am still stuck, yes?

Thanks.

Share this post


Link to post
Share on other sites

Hi,

 

Yes, Annotations are static component of the chart, and you can position them by specifying the "x" and "y" co-ordinates accordingly. However, display value cannot be positioned explicitly. It could be placed inside/outside of the data plots.

 

FusionCharts also supports the option to add padding to the data values. Please refer to the below documentation link for setting valuePadding configuration attribute :

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/chart-paddings-and-margins#set-padding-for-data-value

 

Please note : The value and displayValue are right aligned in a bar visualization.

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Hi Akash,

After some fiddling, I find that if I set the "valuePadding": to a large negative number say "-10000" then it forces the text string over to the far left end of the bar.

This is probably not an intended use of valuePadding, but it is good enough for my needs.

Now I can remove the bar annotations and avoid their pesky mouse event complications.

Thanks for your help.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now