react-timeseries-charts
react-timeseries-charts copied to clipboard
TimeMarker onClick
❔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 |
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.