Pre loader

Rotate TextAnnotation

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



Is it possible to either rotate a TextAnnotation, not necessarily by user interaction but even just in code to have text going vertically?


  • You must to post comments

Unfortunately TextAnnotation doesn’t currently support rotation directly, and the part that creates the svg itself is not simple to override. For the moment it would actually be easiest to use CustomAnnotation to do this.

const rotatedText = new CustomAnnotation({ x1: 0, y1: 7});
rotatedText.svgString = `<svg class="scichart__text-annotation">
    <text x="1" y="1" fill="red" font-size="18" font-family="Arial" transform="rotate(45)">This Text is Rotated</text>

SVG itself has very good rotation support, via the transform property which can include rotations and translations. The significantly tricky bit is getting the centre of rotation correct so that you can place the text where you expect. This SO thread describes a few different strategies


Showing 1 result
Your Answer

Please first to submit.