Emilio

possible to make label background transparent?

Recommended Posts

Hello,

 

I have a chart that is making use of a vline.  The vline has a label whose background I'd like to be transparent.  Is this possible to do?

 

I've tried the data label attribute 'labelBgAlpha', but that didn't seem to work for the vline label.

 

Here is a sample jsfiddle, where you can see a bar getting clipped by the vline label: https://jsfiddle.net/3milio/ps62tnz0/.

 

Thanks,

Emilio

Share this post


Link to post
Share on other sites
Hello,

 

The attribute labelBgAlpha and  labelBgColor is not supported by vLine.

 

Kindly refer the doc to know more about the attribute supported by vLine.

 

However as a workaround, you can achieve your requirement using text and shape annotation.

 


Kindly refer the sample fiddle given below for the implementation.



 

Please visit this doc for further reference about annotation.

 

Hope this will help.

Share this post


Link to post
Share on other sites

Hello,

 

Kindly verify one thing, that adding the transparency to background of the vLine label is a fix for the actual problem or not ?

 

Looking forward to your valuable response.

Share this post


Link to post
Share on other sites

Hello Prerana,

 

Thanks for the tips.  Using the transparency as I mentioned it originally doesn't fix the problem.  As you mentioned, it is not supported.

 

I like your suggestions for using annotations, but haven't implemented that at this point.  Instead, I made the label background the same color as the canvas, removed the label's border, and added some padding at the top of the chart (by using the pYAxisMaxValue attribute) so that no bars get occluded by the vline label.

 

Thanks,

Emilio

Share this post


Link to post
Share on other sites

Hello,

 

Thanks for the reply.

 

If we will support the attribute to make the label backgroud transparent, would that going be the fix of this issue?

 

Kindly share your view on this.

Edited by Prerana

Share this post


Link to post
Share on other sites

I appreciate the offer, but I don't think that would be a better solution for my particular scenario than what I've worked up: adding a buffer zone to the top of the chart by manipulating the axis max value attributes.  The reason I say this is because there will inevitably be times when the bars collide with the vline label.  And if the vline label background is transparent, then the text may get lost in the bar - especially if the two colors are the same or similar.  This is not something I had foreseen when I originally posted my question.

 

I don't know if your proposed change would help anyone else, but please don't make the change on my behalf.

 

Thanks!

Emilio

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