To draw a diagonal line with diagonal text using SVG renderer

[SankeerthanaS]

Hi team,
I am in need to draw a diagonal line between point A and B. I could able to acheive this using SVG renderer.path() function. But I am really struck in placing the diagonal label to this diagonal line. Can you help me to acheive this functionality.
Please find the below logic what i have used to draw a diagonal line in highcharts.

this.chartData.ref.renderer.path([["M", aX, aY], ["L", bX, bY]])
.attr({
stroke: "#808080",
}).add());

P.S : aX,aY,bX.bY are the points which i have calculated based on the requirement.

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

Sure, I've prepared a simple demo for you: https://jsfiddle.net/BlackLabel/eyd6fcx5/

1. I'm using renderer.path to render a custom SVG path from a place (x, y) to (x2, y2).

2. I'm using renderer.text to render a custom text element.

3. I'm rotating the renderer.text so that the angle of the text matches the angle of the line.

Please let me know if that's what you were looking for.

Best regards!

[SankeerthanaS]

Thanks for the response !

The above solution helped to place the label diaganolly. But I need to place the label at the end of line.
https://jsfiddle.net/13okx7gr/ -- Like mentioned in this example.

can you help me to place the label at the end of the line but within the chart area. Basically my requirement is to place the label inside the charting area

[jakub.s]

Hi,

Thanks!

Sure, here's a demo: https://jsfiddle.net/BlackLabel/382a0rm7/

In order to position the label at the end of the line you need to adjust its position to take width of the label into account.

Please let me know if everything's clear and if that's what you were looking for.

Best regards!

[SankeerthanaS]

Thanks for the response ! It Worked as expected .