Adding annotations by time

[thijserven]

Hi, is it possible to add a pre-defined set of annotation marker that represent a certain event to the chart?

If I understand correctly the only possible way is doing this is like shown this example: https://github.com/react-financial/react-financial-charts/blob/main/packages/stories/src/features/annotated/Annotated.tsx

This way the "when" function basically determains whether or not an annotation gets placed on the x-axis. (In the example above it places the same pre-defined annotation wherever the day is a monday.

However in my use case I have a pre-defined set of annotations that indicate an event on the timeline. Is it possible to add the annotations by time?

So for example something like this where it simply loops through the array of annotations and places it at the correct place on the time axis (y-axis):

    const annotations = [
        {text: "A", tooltip: "Tooltip A", time: 1632494860836},
        {text: "B", tooltip: "Tooltip B", time: 1632494823234},
        {text: "C", tooltip: "Tooltip C", time: 1632494658389}
    ];

    return (
        annotations.map(a => (
            <Annotate 
                with={LabelAnnotation}
                usingProps={{
                    text: a.text,
                    tooltop: a.tooltip,
                    y: ({ yScale, datum }) => yScale(datum.high),
                }}
                timeOfEvent={a.time}
            />
        ))
    )