Double labels for line annotations

Hello Kamil,
I think the straightforward solution would be to use 2 LineAnnotations (or maybe AxisMarkerAnnotation) for this and adjust their styles accordingly.
Then when one of them is being dragged you can update the position of the other respectively.

Another solution potentially would be to customize the rendering logic by extending the LineAnnotation class and overriding some methods to draw both labels. This, however, requires some understanding of how internals work.

Try the first solution if that works for you and let us know whether you have managed to achieve the desired behaviour.

Hello,
I create labels as follows. Only problem is with fontFamily, because despite setting Ubuntu Mono for the 2 labels on the left, they have the default font. In addition, setting axisFontFamily only changes the font family of only one label, and the ones I added remain the default, which is Ariel. Also zoom does not change the font size. Is it possible to set a different font family using drawLineAnnotation and fix font size problem?

  drawWithContext(renderContext, xCalc, yCalc, viewRect) {
        const priceTextStyle = {color: this.parentSurface.themeProvider.crosshairAxisLabelFont, fontSize: this.axisFontSize * DpiHelper.PIXEL_RATIO, fontFamily: this.axisFontFamily};
        const priceDifferenceTextStyle = {color: this.axisLabelStroke, fontSize: 12 * DpiHelper.PIXEL_RATIO, fontFamily: "Ubuntu Mono, monospace"};

        const borderY1 = this.getY1Coordinate(xCalc, yCalc);
        const borderY2 = borderY1;

        const price = this.parentSurface.annotations.items.find(({id}) => id === 'priceAnnotation')?.y1;

        // Price annotation
        drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.Axis, this.y1.toFixed(2), 0, 0, borderY1, borderY2, priceTextStyle, this.parentSurface.themeProvider.crosshairAxisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Right);

        // % price difference
        drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.TopLeft, getPriceDifference(price, this.y1, "UP"), 0, 0, borderY1, borderY2, priceDifferenceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Left);
        drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.BottomLeft, getPriceDifference(price, this.y1, "DOWN"), 0, 0, borderY1, borderY2, priceDifferenceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Left);

        super.drawWithContext(renderContext, xCalc, yCalc, viewRect);
    }

I have created a custom class for creating horizontalLineAnnotation. Each line must have labels on the left side above and below at the same distances, showing percentage changes that are recalculated with every line movement. They should have a fixed font, monospace Ubuntu Mono.

The label above the line (centered, with user-editable text) remains unchanged.

On the right side, on the Y-axis, there should be a label showing the current price value, which is the y1 value (for vertical lines, the date will be provided along with the label on the X-axis).

The assumption is to draw the labels immediately when creating the line.

Regarding zoom, I meant browser zoom. I have attached a picture at 125% zoom. I would like these additional labels to be scalable as well.
https://ibb.co/2qGvQM5

Currently, there remains a problem with the zoom and the font family of the labels on the left side.
Below I attach the code for CustomizedHorizontalLineAnnotation.

    import {
    HorizontalLineAnnotation,
    EventHandler,
    drawLineAnnotation,
    EHorizontalAnchorPoint,
    ELabelPlacement,
} from "scichart";
import {DpiHelper} from "scichart/Charting/Visuals/TextureManager/DpiHelper";
import {dividedBy, multiplyValues, subtractValues} from "@/utils/calculationUtils";
import {colorListForDarkFont} from "@/constans/chart";

function getPriceDifference(price, lineValue, direction) {
    const baseValue = direction === "UP" ? lineValue : price;
    const compareValue = direction === "UP" ? price : lineValue;
    const percent = subtractValues(dividedBy(multiplyValues(baseValue, 100), compareValue), 100);

    return percent > 0 ? `+${percent.toFixed(2)}%` : `${percent.toFixed(2)}%`;
}

class CustomizedHorizontalLineAnnotation extends HorizontalLineAnnotation {
    constructor({
                    x1,
                    y1,
                    stroke,
                    strokeThickness,
                    isEditable,
                    isSelected,
                    id,
                    strokeDashArray,
                    onClick,
                    onDragEnded,
                    onDragStarted,
                    labelPlacement,
                    labelValue,
                    showLabel,
                    axisLabelFill,
                    isHidden,
                    onHover,
                    lineType,
                }) {
        super();
        this.customDragEventHandler = new EventHandler();
        this.id = id;
        this.isSelected = isSelected;
        this.isHidden = isHidden;
        this.onClick = onClick;
        this.onHover = onHover;
        this.onDragEndedFunction = onDragEnded;
        this.onDragStartedFunction = onDragStarted;
        this.strokeDashArray = strokeDashArray;
        this.stroke = stroke;
        this.strokeThickness = strokeThickness;
        this.isEditable = isEditable;
        this.selectionBoxStroke = "rgba(255,255,255,0)";
        this.selectionBoxThickness = 0;
        this.annotationsGripsRadius = 8;
        this.annotationsGripsFill = "#f4730b33";
        this.annotationsGripsStroke = "#f4730b";
        this.x1 = x1;
        this.y1 = y1;
        this.labelPlacement = labelPlacement;
        this.labelValue = labelValue;
        this.showLabel = showLabel;
        this.axisLabelFill = axisLabelFill;
        this.lineType = lineType;
    }

    hover(args) {
        super.hover(args)
        this.onHover(args);
    }

    click(args, selectOnClick) {
        const isSelected = super.click(args, selectOnClick);
        if (isSelected) {
            this.onClick({mouseArgs: args, sender: {id: this.id}});
        }
        return isSelected;
    }

    onDragEnded() {
        super.onDragEnded();
        this.onDragEndedFunction();
    }

    onDragStarted(args) {
        if (this.onDragStartedFunction) {
            this.onDragStartedFunction();
        }
        return super.onDragStarted(args);
    }

    onDragAdorner(args) {
        super.onDragAdorner(args);
        this.customDragEventHandler.raiseEvent({args, sender: this});
    }

    delete() {
        this.customDragEventHandler.unsubscribeAll();
        super.delete();
    }

    drawWithContext(renderContext, xCalc, yCalc, viewRect) {
        const priceTextStyle = {
            color: colorListForDarkFont.includes(this.axisLabelFill) ? "#282828" : "#ffffff",
            fontSize: this.axisFontSize * DpiHelper.PIXEL_RATIO,
            fontFamily: this.axisFontFamily
        };
        const priceDifferenceTextStyle = {
            color: this.axisLabelStroke,
            fontSize: 12 * DpiHelper.PIXEL_RATIO,
            fontFamily: "Ubuntu Mono, monospace"
        };

        const borderY1 = this.getY1Coordinate(xCalc, yCalc);
        const borderY2 = borderY1;

        const price = this.parentSurface.annotations.items.find(({id}) => id === 'priceAnnotation')?.y1;

        // Price annotation
        drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.Axis, this.y1.toFixed(2), 0, 0, borderY1, borderY2, priceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Right);

        // % price difference
        drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.TopLeft, getPriceDifference(price, this.y1, "UP"), 0, 0, borderY1, borderY2, priceDifferenceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Left);
        drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.BottomLeft, getPriceDifference(price, this.y1, "DOWN"), 0, 0, borderY1, borderY2, priceDifferenceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Left);

        super.drawWithContext(renderContext, xCalc, yCalc, viewRect);
    }
}

export {
    CustomizedHorizontalLineAnnotation
};