Pre loader

Is there a way to customize box annotation?

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


I wanted to customized my box annotation further, for example, I wanted to give my box annotation some border radius, it seem like there is no way to do so currently.

I know that there is custom annotation like svg annotation, but those are svg, the reason Custom annotation doesn’t work for me is because they are not responsive to zooming since they are image/svg, unlike normal box annotation.

For example, for normal box annotation, I can give it x1 to x2 so that when I zoom in the chart, the box annotation expanded. But for Custom annotation, they only take one x point for placement, so I can not cover x1 to x2, it only going to stay on x1.

So, I wonder if there is currently a way I can add border radius to a box annotation, or is there a plan to do so in the future?

Let me know, thank you!

  • You must to post comments

This sounds as a nice improvement to make. But as of now I can only suggest using the CustomAnnotation for such cases. And I believe there is a way to deal with the resizing issue that you have mentioned.

Here is an example of creating a Scalable Custom Annotation:

  class ScalableAnnotation extends CustomAnnotation {
    private initialWidth: number;
    private initialHeight: number;
    private initialDiff: number;

    public update(
      xCalc: CoordinateCalculatorBase,
      yCalc: CoordinateCalculatorBase,
      xCoordSvgTrans: number,
      yCoordSvgTrans: number
   ): void {
     super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
     if (!this.initialDiff) {
       this.initialDiff = xCalc.visibleMax - xCalc.visibleMin;
       this.initialWidth = Number.parseFloat(this.svg.getAttribute("width"));
       this.initialHeight = Number.parseFloat(this.svg.getAttribute("height"));
     } else {
       const diff = xCalc.visibleMax - xCalc.visibleMin;
       if (diff !== this.initialDiff) {
       const width = (this.initialWidth * this.initialDiff) / diff;
       const height = (this.initialHeight * this.initialDiff) / diff;
       this.setSvgAttribute("width", width);
       this.setSvgAttribute("height", height);
       let borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
       let borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
         borderX1 + width,
         borderY1 + height

// Adding an instance of Scalable Custom Annotation.
// Notice the ScalableAnnotation class used and sizing properties set on the SVG string
const customAnnotation = new ScalableAnnotation({
  x1: 5,
  y1: 6,
  xCoordShift: 0,
  yCoordShift: 0,
  horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
  verticalAnchorPoint: EVerticalAnchorPoint.Top,
  svgString: `<svg width="100" height="100" viewbox="0 0 100 100" preserveAspectRatio="xMinYMin meet"><circle cx="50%" cy="50%" r="50" fill="blue"/></svg>`,
  isEditable: true,
  xCoordinateMode: ECoordinateMode.DataValue,
  yCoordinateMode: ECoordinateMode.DataValue

See the Pen
by SciChart.js Official (@scichart)
on CodePen.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.