更改工具提示的样式-图表

时间:2018-10-01 19:18:22

标签: css reactjs recharts

我为使用图表实现的图表创建了自定义工具提示。我想更改其样式,但无法删除行之间的多余空格。我尝试更改行高,内边距和边距,这会删除空间,但没有任何效果。

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

哪种样式属性可以帮助我实现它?

1 个答案:

答案 0 :(得分:1)

好像在<p>元素上定义了边距。

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