TimeMarker onClick

[avenix]

❔Question

I want to add time markers to the time series, to select them and to move them with the mouse.

1- I render TimeMarkers within the Charts as described in the documentation:

<Charts>
    ...
    <TimeMarker
        axis="axis1"
        time={powerPeakTime}
        infoStyle={{line: {strokeWidth: "2px", stroke: "#83C2FC"}}}
        infoValues="Peak power" />
    ...
</Charts>

and added an onClick event handler to the TimeMarkers renderLine method:

renderLine(posx) {
    return (
      <line
        onClick={(e) => {
          this.props.onClick(e);
        }}
        style={this.props.infoStyle.line}
        x1={posx}
        y1={0}
        x2={posx}
        y2={this.props.height}
      />
    );
  }

any idea why am I not getting those events?

2- Do you think it would make more sense to handle mouse events in my application and use the tracker position to identify the TimeMarker being clicked?

Thanks! I love your library.

Environment

Software	Name/Version
react-timeseries-charts	0.16.0
Browser	Chrome 81
Operating System	Macos

[avenix]

ok. I found the answer and I am posting it here for the reference. I was using a MultiBrush as well, which turned out to steal the clicks of the TimeMarkers. This was my hierarchy:

ChartRow
  Multibrush
  LabelAxis
  Charts
    LineChart
    TimeMarker
    TimeMarker <-- I wanted to detect clicks on these
    TimeMarker
    TimeRangeMarker (current)

I guess I will now create something like a MultiBrush but for lines rather than ranges.