Create label on drawing line

[prackode]

I am using stock Chart, and there is a feature where user can draw the line using the plus button too. This very good feature to have, appreciated. Just I want one feature in that:

• Whenever user create the line using that Plus button, I want to create the label too showing on the valueAxis of that adjacent price. like this :

There are a couple of ways to do ADD THE LABEL, only: I did by using the axis range, Like this :

createPlusButton() {
    let cursor = this.chartInstance.mainPanel.get("cursor");
    var plusButton = cursor.children.push(am5.Button.new(this.chartInstance.instance, {
      centerX: am5.p100,
      centerY: am5.p50,
      width: 24,
      height: 24,
      position: "absolute",
      x: am5.p100,
      dx: 0,
      cursorOverStyle: "pointer",
      icon: am5.Graphics.new(this.chartInstance.instance, {
        themeTags: ["icon", "plus"]
      })
    }))

    var background = plusButton.get("background");
    background.setAll({
      fillOpacity: 1,
      cornerRadiusBL: 4,
      cornerRadiusBR: 4,
      cornerRadiusTL: 4,
      cornerRadiusTR: 4,
      stroke: am5.color('#dedede'),
      fill: AXIS_TOOLTIP_COLOR,
    })

    plusButton.get("background").states.create("hover", {}).setAll({
      fill: AXIS_TOOLTIP_COLOR,
      fillOpacity: 1
    });
    plusButton.get("background").states.create("down", {}).setAll({
      fill: AXIS_TOOLTIP_COLOR,
      fillOpacity: 1
    });

    cursor.lineY.on("y", (y) => {
      plusButton.set("y", y);
    });
    let currentCursorValue = 0;
    // let cursor = mainPanel.get("cursor");
        cursor.events.on("cursormoved", (ev) =>{
          var y = ev.target.getPrivate("positionY");
          var valueY =this.chartInstance.valueAxis.positionToValue(y);
          var yMax = this.chartInstance.valueAxis.positionToValue(1);
          var yMin = this.chartInstance.valueAxis.positionToValue(0);
          currentCursorValue = yMax + yMin - valueY;
          // console.log(yMax + yMin - valueY)
        })
    plusButton.events.on("click", (e) => {
      var rangeDataItem = this.chartInstance.valueAxis.makeDataItem({
        value: currentCursorValue,
      });
      var range = this.chartInstance.valueAxis.createAxisRange(rangeDataItem);
      range.get("label").setAll({
        fill: am5.color(0xffffff),
        text: this.chartInstance.stockChart.getNumberFormatter().format(currentCursorValue, this.chartInstance.numberFormat),
        background: am5.RoundedRectangle.new(this.chartInstance.instance, {
          fill: am5.color(0x297373)
        })
      });
      this.chartInstance.drawingControl.addLine("Horizontal Line",  this.chartInstance.mainPanel, {
        x:  this.chartInstance.mainPanel.plotContainer.width() - 50,
        y: e.point.y
      });
    });

  }

But the issue is :

• When I delete/erase the line I also want to remove that respective label only. Which is what I am not able to get. I want to know how can I remove the respective label of that line and if there is any other or a better way to do this you know?

[prackode]

My motive is too create a label with the price, and remove/delete it with respect to the line only.

[martynasma]

An idea:

1) Add a label via axis range. 2) Add drawingadded event to execute once to StockChart. 3) When it kicks in, use its drawingId to associate axis range data item with thge drawingId via some kind of custom object. 4) Add drawingremoved event to execute once to StockChart. 5) Once it kicks in, use its drawingId to look up related axis range data item and dispose it.

I hope that makes sense.

[prackode]

Glad that I got the same thought @martynasma Exactly that's what I have done, and handled almost all the edge cases like deleting/erasing drawings removing labels too etc.

Got stuck in one edge case, that what If user dragged (upwards/downwards) the line, by clicking on the pointer/bullet present on the line. So in that case ideally the label should move with that right?

In amchart there is an event named drawingsupdated, so if somehow I can get the drawingId of that line which was dragged then I can link/map that axisLabel .

As the drawingsupdated doesn't gets the individual drawingId it doesn't have that param, That's where this issue comes #1740

[martynasma]

As the drawingsupdated doesn't gets the individual drawingId it doesn't have that param,

It's doesn't, and there's no specific event for that.

I suppose you could cycle through all lines when it kicks in and update the related labels.