держите легенду хай-чартов отзывчивой, когда над графиком лежит другой div

Question

Я хочу отображать HTML-кнопки в четырех углах полярной диаграммы HighCharts. Я был в состоянии наложить кнопки на div диаграммы, используя CSS. Однако в результате этого элементы легенды диаграммы не реагируют на щелчки мыши.

Это пример кода для одной из кнопок:

<div className="pop-chart-button pop-chart-button-top pop-chart-button-left">
  <a role="button" onClick={this.showBrandQuadrantChart}>
    <img src={expandImageUrl} alt="expand" /> BRAND
  </a>
</div>

Есть ли способ сделать это, чтобы элементы легенды не реагировали на щелчки мышью?

Answer 1

Решил мою проблему, установив z-index для div и диаграммы, и кнопки div, и поместив div диаграммы после div, содержащего кнопки.

Вот стили scss:

.pop-kahn-chart-container {
  position: relative;

  .pop-chart {
    z-index: 99;
  }

  .pop-chart-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .pop-chart-button {
      font-family: 'Montserrat', sans-serif;
      font-style: normal;
      font-size: 0.86rem;
      font-weight: 600;
      position: absolute;
      z-index: 9;

      a {
        border-radius: 2px;
        padding: 2px 8px;
        color: $bp-green;
      }

      a:hover {
        background-color: $bp-gray2;
      }

      img {
        width: 19px;
        height: 19px;
        vertical-align: center;
        position: relative;
        top: -3px;
      }

      @include media-breakpoint-down(lg) {
        font-size: 0.6rem;

        img {
          width: 14.25px;
          height: 14.25px;
          top: -2.25px;
        }
      }
    }

    .pop-chart-button-top {
      top: 10%;
    }

    .pop-chart-button-bottom {
      top: 85%;
    }

    .pop-chart-button-left {
      left: 5%;
    }

    .pop-chart-button-right {
      left: 75%;
    }
  }
}

Вот код, который отображает график с наложенными кнопками:

<div className="pop-kahn-chart-container">
  <div className="pop-chart-buttons">
    <div className="pop-chart-button pop-chart-button-top pop-chart-button-left">
      <a role="button" onClick={this.showBrandQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> BRAND
      </a>
    </div>

    <div className="pop-chart-button pop-chart-button-top pop-chart-button-right">
      <a role="button" onClick={this.showExperienceQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> EXPERIENCE
      </a>
    </div>

    <div className="pop-chart-button  pop-chart-button-bottom pop-chart-button-left">
      <a role="button" onClick={this.showLowPriceQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> LOW PRICE
      </a>
    </div>

    <div className="pop-chart-button pop-chart-button-bottom pop-chart-button-right">
      <a role="button" onClick={this.showFrictionlessQuadrantChart}>
        <img src={expandImageUrl} alt="expand" /> FRICTIONLESS
      </a>
    </div>
  </div>

  <div className="pop-chart">
    <HighchartsReact highcharts={Highcharts} options={options} />
  </div>
</div>

Answer 2

Просто угадывая, не видя ваш CSS-код, кнопки z-index находятся под диаграммой. Установка кнопок на более высокий z-индекс, вероятно, решит проблему.