How to fire the drawing tool on the button active.

[workingbuddy10]

Currently on the button click I want to initiate the 'Horizontal Line' .

• I can initiate the drawing tool but it is taking 2 clicks, which I don't want.
• When the user clicks on the button, it should draw the horizontal line.

I tried looking in the codebase there is a protected function _setTool which does the job : https://github.com/amcharts/amcharts5/blob/1e2243d7153ef537807abeced990b66dbc01fce3/src/.internal/charts/stock/toolbar/DrawingControl.ts#L838

I tried doing this in my codebase but it is taking 2 steps and it didn't worked :

                series.enableDrawing();
                this._currentEnabledSeries.push(series);

To be more precise my code snippet looks like this :

      document.getElementById("anchor")?.classList.remove("active");
      this.selectedDrawingControl?._maybeInitToolSeries(tool);
      const seriesList = this.selectedDrawingControl?._drawingSeries[tool];
      if (seriesList && seriesList.length > 0) {
        seriesList[0].enableDrawing();
        this.selectedDrawingControl._currentEnabledSeries.push(seriesList[0]);
      }

I want if I click on my button (BT) the horizontal line draws. codepen : https://codepen.io/Ansh-m-the-reactor/pen/JjQyrqB

[martynasma]

You can just set "tool" setting on the drawing tool instance:

selectedDrawingControl.set("tool", "Horizontal Line");

[workingbuddy10]

Did same in the codepen @martynasma It didn't wokred : https://codepen.io/Ansh-m-the-reactor/pen/JjQyrqB

[martynasma]

It does work. It switches the tool, but it does not enable drawing mode. If you need it enabled, you need to do enable by setting active: true on drawing control:

drawingControl.setAll({
  active: true,
  tool: "Horizontal Line"
});

Related docs: https://www.amcharts.com/docs/v5/charts/stock/toolbar/drawing-control/#Enabling_draw_mode

[workingbuddy10]

@martynasma As you can see in the below video :

• When I clicked on the button, it activated the horizontal line. But the horizontal line was not drawn.
• And when I clicked on the chart then the line was drawn.
• It should have directly drawn the line, when clicked on the button.

https://github.com/user-attachments/assets/b72a01f7-eb60-4be3-8247-a96f0afd8cce

• I want once I clicked on the button the horizontal line gets drawn, I don't want to click anywhere in chart. ( like how it happens in tradingview for reference)
• Trying to achieve something like this :

https://github.com/user-attachments/assets/c3985da2-b868-4bc2-a2ac-7a7f0f630731

[workingbuddy10]

@martynasma

• to be more simple: I want to draw the line just by clicking on the button. I don't just want to initiate.

And the second issue :

• IF I remove the background of the button, then I also lost the click event. removing the background like this :

   button.get("background").setAll({
     forceHidden: true
   });

codepen link : https://codepen.io/Ansh-m-the-reactor/pen/JjQyrqB?editors=0010

[workingbuddy10]

Hey @martynasma ,Sorry for tagging! Any lead on this would be very helpful!!

[workingbuddy10]

So will be able to draw the line via clicking on the button? As explained here https://github.com/amcharts/amcharts5/issues/1673#issuecomment-2293182147

If yes, then how it will look like?

[martynasma]

I'll let you know the details, when the new version is out later this week.

[martynasma]

Implemented in 5.10.2.

[5.10.2] - 2024-08-23

Added

• panSensitivity added to AxisRenderer (default: 1).
• maxPanOut added to ZoomableContainer (default: 0.4).
• Method addLine(tool, panel, point) added DrawingControl. Allows adding line drawings via API. Supports ("Line", "Horizontal Line", "Horizontal Ray", "Vertical Line" tools). More info.

Fixed

• Fast mouse wheel zooming of stock chart could cause browser to hang in some cases.
• minBulletDistance of a XYSeries was ignored when base axis was CategoryAxis and other axis was DateAxis.
• RTL labels with text-wrapping enabled were not being positioned properly.

Full change log.

Download options.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.

[martynasma]

Refer to this tutorial for info and example: https://www.amcharts.com/docs/v5/charts/stock/toolbar/drawing-control/#Adding_line_drawings

[workingbuddy10]

@martynasma a minor enhancement : as you know we can create a horizontal line by clicking on the plus button.

In Trading Technology charts, one can draw the same line by double clicking on the valueAxis. So it will be drawn at that price point. Can we have this, any function?

[martynasma]

You can add a dblclick event on an axis, and use addLine() in the event handler.

[workingbuddy10]

Sorry, I should have framed the question in a better way. Yes, I can draw the line on ddclick on valueAxis. I want to show the label at which price the line is marked. Like this :

And if I click on the eraser button of drawings, both the line and its respective label should get delete. If I click on the delete all, the all the drawings with respect to its label should get removed.

[martynasma]

In that case you should probably add an axis range rather than horizontal line drawing.