React Vis: Crypto Chart Hints

Last week I showed how to take cryptocurrency price data and turn it into valid data for an XY Plot and LineSeries on react-vis. Be sure to check that out first .

Today I am going to expand on that and cover how to add data hints on a graph as a user hovers along the line. This takes a basic graph to the next level and really gives the user great insights to their data. Let’s Start.

The only think I am adding from last week is the Hint from react-vis, and the onNearestX function. A Hint is a popover that will appear when you over over a data point on the line. We populate the hint with the onNearestXY prop that is passed to Line Series. React vis also offers onNearestX if that better suits your graph. This function will pass the value(data point) closest to your mouse, I then take that value and set the state of my hint. Hint takes a value prop which I set equal to my state. The Hint now has the correct data to populate itself. Remember my data points or “hintValue” looks like

{x: Timestamp, y: Price}

You can customize your hint with different elements within the Hint component, I am just using paragraph tags and formatting my data for the user. Your graph should now utilize hints and look something like this, my hint is styled with CSS.

Awesome! Let’s make it even better.

When hovering over the line it would be helpful if the actual data point it self would highlight or have a circle around it so you could see exactly where on the graph it is coming from. Let’s make it happen.

MarkSeries is imported from React-Vis. This type of graph is a collection of blobs that represent the data. The statement above is taken from react-vis documentation. It is saying, if hoveredNode can be converted to true or is a truthy value than it returns the MarkSeries, and the only data it has a single hoveredNode. To populate the hoveredNode with data we simply use our onNearestXY function again and store the value in setHoveredNode’s state.

Now let’s see what it looks like.

Now we have a grey dot that gives a more accurate look at the data point! Using hints is really important to give user's the best insights to their data and they are super fun to implement!