Search code examples
cssreactjsrecharts

Change the styling of tooltip - recharts

I created a custom tooltip for my chart that I implemented using recharts. I would like to change the styling of it but am unable to remove extra whitespaces between the lines. I tried changing line-height, padding and margin that would remove the space but nothing worked.

enter image description here

<div className="customTooltip">
  <h2 className="tooltipLabel">{e.payload[0].payload.initiatorUsername}</h2>
  <i className="tooltipTitle">{e.payload[0].payload.title}</i>
  <div className="tooltipContent">
    <p>Request startTime:</p>
    <p>Approver name:</p>
    <p>Approver Title</p>
    <p>
      Approved Time:{" "}
      {moment.unix(e.payload[0].payload.time).format("MMM Do YYYY, h:mm:ss")}
    </p>
  </div>
</div>

.recharts-tooltip-wrapper {
    .customTooltip {
      margin: 0;
      line-height: 5px;
      border: 1px solid #f5f5f5;
      background-color: rgba(255, 255, 255, 255);
      padding-bottom: 0%;
  
      .tooltipTitle {
        margin: -10px;
        color: #666;
        top:5px;
      }
    }
  }

which styling property would help me to achieve it ?

Solution

  • Looks like there is margins defined on the <p> elements.

    .recharts-tooltip-wrapper {
  .customTooltip {
    p {
      margin:0;
    }
  }
}