Pre loader

Text Annotation with box

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


Sorry for opening another question, but this followup to 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.


  • You must to post comments
Best Answer


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.


  • Dan Santimore
    Thanks David! I did not expect full service on this one as it was going to be tedious, but I definitely appreciate it.
  • Andrew Burnett-Thompson
    Heroic work by David & the scichart JS team :D if you like what we do, please leave a review! (on Trustpilot or
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.