React-vis: Crosshair does not work when xType="time"

[ejmudrak]

The xType="time" is working great on a LineSeries, but when I attempt to display a Crosshair that appears over the corresponding x-axis value, I get errors due to Date being an object.

The data used by the crosshair values prop is the same as what the LineSeries is receiving.

The error message:

[mcnuttandrew]

May be related to #1031

[ejmudrak]

I'm not sure that this is related, time is working fine on the x-axis, I believe there is just a format issue with the Crosshair component.

[mathewleland]

For actual hints and crosshairs, you don't want to use an actual date object. I would recommend using d3's time format function to turn it into a string that you would like to see on hover. Or you could just say, for example, EriksCrossHairValue.x.toString()to really make it functional for now.

[ejmudrak]

Sure! I've made them into strings already, but for the crosshair x to appear over the correct x-axis coordinate, it needs to be the same format as what is supplied to LineSeries. Otherwise the crosshair always appears off the left of the graph like so:

[truncs]

@ejmudrak I was having the same issue and the way to get around it is by adding a titleFormat to the Crosshair which would convert from a date object to a string which which is a valid react child. This way you don't disrupt the auto positioning of the crosshair.

            <Crosshair values={crosshair}
              titleFormat={(d) => ({title: 'Date', value: d[0].x.toLocaleDateString()})}
          />

[ejmudrak]

Thanks a ton @truncs

I had to convert it back to a date, but the Crosshair now positions correctly for dates! I also had to make sure that my function for onNearestX didn't touch any formatting.

```
titleFormat={ d => ({
title: 'Date',
value: new Date(d[0].x).toLocaleDateString(),
}) } />