Display Hint when xType='time'

[dooleyb1]

I'm trying to display a hint on a LineSeries object that has datapoints with xType="time" namely date objects. I can successfully pass the x, y co-ordinates using onNearestXY however when I pass them to a Hint they don't seem to work with this datatype as the x co-ordinate.

The co-ordinates extracted using onNearestXY have the following form:

{x: Wed Sep 07 2016 01:00:00 GMT+0100 (Irish Standard Time), y: 13}

I've scoured the doc's and can't seem to find any solution or work-around to this. Is there any way I could extract the specific x,y co-ordinates using onNearestXY and pass these to Hint?

My code is as follows:

<XYPlot
  margin={{left: 50,bottom: 100}}
  xType="time"
  height={300}
  width= {500}
  onMouseLeave={() => this.setState({value: null})}
>
<XAxis tickLabelAngle={-90}/>
<YAxis/>
<ChartLabel
  text="Commits"
  className="alt-y-label"
  includeMargin={true}
  xPercent={0.02}
  yPercent={0.1}
  style={{
    transform: 'rotate(-90)',
    textAnchor: 'end',
  }}
  />
<LineSeries
  onNearestXY={(value) => this.setState({value: value})}
  data={this.props.graphData}
/>
{this.state.value && <Hint value={this.state.value}/>}
</XYPlot>

[Pardeep94]

I also face same problem. I also face one more problem. When there is string value on x axis like "Janurary" then hint is not showing

[ichbinjon]

Fixed this by passing in a Date object into value of x / y depending on where your Time axis is.

i.e. I have my time axis on x here:

const markSeriesProps = {
            data: this.props.data,
            onNearestXY: (value, event) => {
                let hintValue = {}
                hintValue["x"] = new Date(value.x)
                hintValue["y"] = value.y
                this.setState({ value: hintValue })

            }
        };

...
...

 <MarkSeries {...markSeriesProps} />
  {this.state.value ? <Hint value={this.state.value}/>  : null}