search

nteract / semiotic

A data visualization framework combining React & D3
https://semioticv1.nteract.io/
Other
2.43k stars 133 forks source link

error in tooltip placement in XYFrame with area chart #518

Closed macfarlandian closed 4 years ago

macfarlandian commented 4 years ago

The Y positions used to calculate tooltip placement (and apparently the underlying voronoi layout) appear to be off by half. As you can see in this screenshot (where the corresponding record from the lines prop is highlighted), the tooltip's Y value is exactly half of count in the source data:

Screen Shot 2020-04-03 at 2 45 58 PM

By way of a code example, the same behavior is evident in the interactive docs: https://semiotic.nteract.io/guides/area-chart#area-chart-with-hover

This appears to only affect line charts with lineType="area"; when lineType="line" the tooltip placement is as expected.

emeeks commented 4 years ago

So by default when you are displaying area charts it places the tooltip position in the center of the area. You can adjust this by setting showLinePoints: "top" and the control points will appear at the top of the curve. showLinePoints also accepts "bottom" and "orphan" as values meaning that it will move the control point to the bottom of the filled shape or only show points when the line is discontinuous (due to defined settings) with an orphan point in the gap.

If you don't want to see the actual circles representing those points, you can set pointStyle={{ display: "none" }}.

Just for reference for folks that might simultaneously be passing a points array: you can differentiate between the points you pass and the points generated from lines in that the generated points with have a parentLine or parentSummary props, so you could adjust the above to only show the points you passed like so: pointStyle={d => ({ display: d.parentLine? "none" : "block" })}

macfarlandian commented 4 years ago

Fantastic! Thanks for the quick response. I have verified that this fixes my issue.