[英]Is there any way that I can only show the hovered line in tooltip (Recharts)?
I have tried using customized tooltip but my problem was I don't know how to get the index of the payload that is hovered. 我尝试使用自定义工具提示,但我的问题是我不知道如何获取悬停的有效负载的索引。 What I want is to show only the value of the hovered line in the tooltip.
我想要的是只显示工具提示中悬停线的值。 For example, I hovered over the value 1 line so I only want to show in the tooltip the value 1 only.
例如,我在值1行上方盘旋,所以我只想在工具提示中显示值1。
So here is the image 所以这是图像
Here is my code although I have deleted the Customized Tooltip: 这是我的代码,虽然我删除了自定义工具提示:
export default class LineChartPresentational extends React.Component {
constructor(props) {
super();
this.state = {
clickedLineid: '' }}
changeStrokeclick(data) {
console.log(data, 'see what is coming');
this.setState({clickedLineID: data} ) }
render() {
return (
<div>
<div id="lclastdataref" style={{ textAlign: 'right' }}>
<span>Last Data Refresh: {linechartdf.date} </span>
</div>
<div className='line-charts'>
<div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}>
<ResponsiveContainer>
<LineChart
width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart">
<XAxis dataKey={xAxisColumn} />
<YAxis domain={['auto', 'auto']} />
<Tooltip cursor={false} />
{
linechartdata.map((entry, index) => (
<Line stroke={index === this.state.clickedLineID ? "#2d75ed" : "#9da0a5"} onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
))
}
</LineChart>
</ResponsiveContainer>
</div>
</div>
</div> ); }}
Please I really need your help. 我真的需要你的帮助。 Thanks!
谢谢!
Custom Tooltip is your option to do this. 自定义工具提示是您执行此操作的选项。
<Tooltip content={this.customTooltipOnYourLine}/>
Here customTooltipOnYourLine
is your method to return custom tooltip 这里
customTooltipOnYourLine
是返回自定义工具提示的方法
customTooltipOnYourLine(e){
if (e.active && e.payload!=null && e.payload[0]!=null) {
return (<div className="custom-tooltip">
<p>{e.payload[0].payload["Column Name"]}</p>
</div>);
}
else{
return "";
}
}
Check this link for more info Recharts Tooltip 查看此链接以获取更多信息Recharts Tooltip
Edit 编辑
Check this answer 检查这个答案
Using below logic you can achieve individual tool-tip for each dot. 使用以下逻辑,您可以为每个点实现单独的工具提示。
Demo Link: Line chart with custom Tooltip 演示链接: 带有自定义工具提示的折线图
Hide default Tooltip 隐藏默认工具提示
Add mouse event function on Line (when dot is active) 在Line上添加鼠标事件功能(当点处于活动状态时)
<Line activeDot={{ onMouseOver: this.showToolTip, onMouseLeave: this.hideToolTip }} .... />
custom tooltip div 自定义工具提示div
<div className="ui-chart-tooltip" ref={ref => (this.tooltip = ref)} > <div className="ui-chart-tooltip-content" /> </div>
showToolTip and hideTooltip Function showToolTip和hideTooltip函数
showToolTip = (e) => { let x = Math.round(e.cx); let y = Math.round(e.cy); this.tooltip.style.opacity = "1"; this.tooltip.childNode[0].innerHTML = e.payload["value"]; }; hideTooltip = e => { this.tooltip.style.opacity = "0"; };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.