Sorry for opening another question, but this followup to https://www.scichart.com/questions/js/series-labels got missed.
I’m looking to add a border and background to a TextAnnotation.
Back in the WPF days we had the ability to pretty easily add background colors and such to annotations, thanks to the existing WPF model. I’m assuming in the JS example this would be custom; do you have any existing code/examples for that? Looking for being able to use a colored box whose fill matches the renderable series stroke, along with a contrasting text color.
Dan
- Dan Santimore asked 5 months ago
Thanks Dan, just to let you know we’ve seen this and are working on it.
- You must login to post comments
Hi
Doing this with svg is not trivial as you need to add the text, then measure it, then add the bounding rectangle. By the time we had figured all this out we decided to just add this functionality to the library. This is now released in v3.2.525.
TextAnnotation now has a background property which is an html color string, and a padding property which is our normal Thickness object. Depending on your actual text and the verticalAnchorPoint you are using, you may find that the text does not appear exactly centered vertically compared to the background. This is a common problem with text – the svg measurement does not take into account if your text has ascenders (d) or descenders (g) when calculating the height. However, you can use the padding property to adjust for this.
Regards
David
- David Burleigh answered 5 months ago
Thanks David! I did not expect full service on this one as it was going to be tedious, but I definitely appreciate it.- Heroic work by David & the scichart JS team :D if you like what we do, please leave a review! (on Trustpilot or Reviews.io)
- You must login to post comments
Please login first to submit.
