Add easy to use chart point tooltip about visx

[joshnabbott]

@hshoff any way you could update the links to those examples? They no longer seem to work: https://www.webpackbin.com/bins/-KpGjCM5yQ4nkND4c-P-

[hshoff]

Yup! This is coming.

[hshoff]

@thienanle it does but it's a bit more involved. I'm working on making this easier for folks, but haven't settled on an api I'm happy with just yet.

Here's an example of how it works: https://www.webpackbin.com/bins/-KpGjCM5yQ4nkND4c-P-

Things to note:

1. use a stateful react component (class) so you can grab a ref to the svg <svg ref={s => this.svg = s}>, you'll use this in your event handlers
2. i'm using a transparent <Bar /> overlay on top of the chart to handle the mouse events
3. onMouseMove

// convert event coords to local svg coords
const { x } = localPoint(this.svg, event);
// use xScale.invert to get x value
const x0 = xScale.invert(x);
// use d3-array bisector to find the data value
const index = bisectDate(data, x0, 1);
const d0 = data[index - 1];
const d1 = data[index];
const d = x0 - xStock(d0.date) > xStock(d1.date) - x0 ? d1 : d0;

// use `withTooltip`s `showTooltip()` to update the position and data
showTooltip({
  tooltipData: d,
  tooltipLeft: x,
  tooltipTop: yScale(d.close),
});

I'm hoping to make this easier in the future as I'll be needing to use it for @vx/brush @vx/drag interactions . But for now this should get you up and going with position based on event positions.

Happy to answer any questions if things come up.

[jacek213]

any progress on this one?

[Flaque]

🎉🎉🎉

[williaster]

psyched to see this! 🎉 🏆

[k3rmitt]

So 1337!

[thienanle]

@hshoff does this work with LinePath/AreaClosed? Behavior seems inconsistent with BarStack in the demos.

[thienanle]

@hshoff thank you for the example, super helpful!

Yes it would be great to not have to use a transparent <Bar /> and have the mouse events on the <AreaClosed /> instead. Thanks for your work on this!

I was also thinking, in the case where a chart has more than 1 series (multiple <LinePath /> components for example), would it make sense to put the mouse events on each? Perhaps on a wrapping component (something like <Group />) would make more sense?

[hshoff]

@thienanle yup! you can put the events on the <AreaClosed /> as of @vx/[email protected]. I just used the transparent <Bar /> above to give a bit target area on mouse move for the demo, but it's not necessary.

Example of events on <AreaClosed />: https://www.webpackbin.com/bins/-KpN6KNn40htehDwd80C

For multiple <LinePath />s it depends what you're trying to do, you could put them on each or you could put it on a <Group /> like so: https://www.webpackbin.com/bins/-KpN9sBHl_pBgbCcLFCt

[thienanle]

@hshoff thanks for your example above, it solved my problem!

Have you tested the mouse events on <Arc />? I love the feature of getting the hovered arc section data onMouseMove, but I'm getting an error

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

[hshoff]

@thienanle could you post your onMouseMove function? happy to take a look.

[thienanle]

onMouseMove={data => event => {
	const { x, y } = localPoint(this._svg, event);

	showTooltip({
		tooltipData: data,
		tooltipLeft: x,
		tooltipTop: y,
	});
}}

@hshoff calling showTooltip is what seems to cause the warning.

[thienanle]

I solved my issue by calling showTooltip on onMouseMove on <Group /> and setting tooltipData to my component's state (so that I can get the data for the hovered pie).

<Group
	onMouseLeave={hideTooltip}
	onMouseMove={event => {
		const { x, y } = localPoint(this._svg, event);

		showTooltip({
			tooltipLeft: x,
			tooltipTop: y,
		});
	}}
>
	<Arc
		onMouseMove={data => event => {
			this.setState({
				tooltipData: data,
			});
		}}
	/>
</Group>

But it would be nice to be able to do everything on <Arc />!

[ilyhryh]

@hshoff second

[rachelombok]

@hshoff third

[williaster]

The demos all now link out to code sandboxes, this is the Areas sandbox.

As harry said above, there is an invisible Bar on top of the Areas which triggers the tooltip anywhere you mouse over, but you could change this behavior by moving the onMouse/TouchMove handler to the Area, or whatever is relevant for your series shape.

[olegKusov]

Please show example with normal tooltip for multiline chart (hover on marker circle should show value of series item).