Add an event on a given date & price

[jalogar]

Good evening!

In this nice example (https://www.amcharts.com/demos/stock-chart/) we can see how to create an event on an specific date. I'd like to also set, not only the date (x coordinate) but also the price (y coordinate). Something like, add an event on 2021-04-21 at price 508.

The y coordinate is controlled, in the example above, with this code

let bullet = am5.Container.new(root, {
      dy: -100,
    });

So the question would be, how can we obtain the y coordinate from the price we want to use.

Thanks in advance!

[jalogar]

I made it work with this code

const plotHeight = mainPanel.plotContainer.height();
const position = valueAxis.valueToPosition(price);
const y = valueAxis.get("renderer").positionToCoordinate(position) - plotHeight;
...
let bullet = am5.Container.new(root, {
  dy: y,
});

Moreover, I had to wrap the code that calls that function in a setTimeout in order to work properly. Otherwise the position was not being set properly

[zeroin]

An alternative solution would be to add an invisible series with data at the points where you want to have an event. Axis bullets supposed to be on axis. But your workaround is also valid.

[jalogar]

Thanks for the response @zeroin . I'd like to ask you about your proposal. How could I just plot the bullets and not the line? Would it be possible to have more than 1 bullet (e.g. 2 buys at different price) in the same date?

[zeroin]

To hide a line, just set series.strokes.template("forceHidden", true) Sure, you can have multiple bullets at the same date.