Show tooltip on hover

How make it?

https://s.mail.ru/37sz/fwFzs6Lrx

I try

{data.map((e, i) =>
  <Bar
    dataKey={e}
    fill={lib.getRandomColor()}
    onMouseOver={((e) => {console.log(e)})}
    { ...columnChartToBarChart == false ? {stackId: 'a'} : {}}
    key={i}
    label={(obj) => this.renderCustomLabel(obj, e, i)} />
)}

renderCustomLabel(obj, label, index) {
  let { showTopLabel, columnChartHoveredBar } = this.state;
  let { x, y, height, width } = obj;

  if (+obj.payload[label] <= 0) return null;
  if (height < 30) return null;
  if (width < 50) return null;

  return <text
    key={index * index}
    x={x}
    y={y}
    dy={-4}
    fill={"#333"}
    // transform="rotate(-35)"
    // { ...showTopLabel == false ? {transform: "rotate(-35)"} : {} }
    fontSize={14}
    textAnchor="middle">
      {obj.payload[label]}
    </text>
}

[rajatkanthaliya12]

Using below logic you can achieve individual tool-tip for each dot.

Demo Link: Line chart with custom Tooltip

1. Hide default Tooltip

   <Tooltip cursor={false} wrapperStyle={{ display: “none” }} />

2. Add mouse event function on Line (when dot is active)

    <Line
          activeDot={{
            onMouseOver: this.showToolTip,
            onMouseLeave: this.hideToolTip
          }}
         ....
        />
   

3. custom tooltip div

      <div className="ui-chart-tooltip" ref={ref => (this.tooltip = ref)} >
          <div className="ui-chart-tooltip-content" />
      </div>
   

4. showToolTip and hideTooltip Function

         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";
          };
   

[taner-yilmaz]

Line chart with custom Tooltip

I solved it another way 😉