Is there a way to customize box annotation?

Hello,
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;
       this.setAnnotationBorders(
         borderX1,
         borderX1 + width,
         borderY1,
         borderY1 + height
       );
      this.updateAdornerInner();
     }
   }
 }
}

// 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
ScalableCustomAnnotation by SciChart.js Official (@scichart)
on CodePen.