ChartActiveDot.js
3 months ago
ChartCrosshair.js
3 months ago
ChartTooltip.js
3 months ago
EngagementAreaChart.js
3 months ago
RetentionTooltip.js
3 months ago
chartTheme.js
3 months ago
index.js
3 months ago
ChartCrosshair.js
26 lines
| 1 | import { CROSSHAIR_COLOR } from "./chartTheme"; |
| 2 | |
| 3 | /** |
| 4 | * Vertical dashed crosshair line shown on chart hover. |
| 5 | * Used as the `cursor` prop on Recharts <Tooltip>. |
| 6 | * |
| 7 | * Recharts passes x, y, width, height, and points automatically. |
| 8 | */ |
| 9 | const ChartCrosshair = ({ x, y, height }) => { |
| 10 | if (x == null) return null; |
| 11 | |
| 12 | return ( |
| 13 | <line |
| 14 | x1={x} |
| 15 | y1={y || 0} |
| 16 | x2={x} |
| 17 | y2={(y || 0) + (height || 0)} |
| 18 | stroke={CROSSHAIR_COLOR} |
| 19 | strokeWidth={1} |
| 20 | strokeDasharray="4 3" |
| 21 | /> |
| 22 | ); |
| 23 | }; |
| 24 | |
| 25 | export default ChartCrosshair; |
| 26 |