Стили всплывающих подсказок Apexcharts не применяются

Я пытаюсь применить базовый стиль к своей всплывающей подсказке, используя ApexCharts в React.

Это моя конфигурация:

const options = {
    chart: {
      foreColor: "#ffffff12",
      toolbar: {
        show: false
      }
    },
    colors: ["white"],
    stroke: {
      width: 3
    },
    grid: {
      borderColor: "#ffffff12",
      borderWidth: 1,
      clipMarkers: false,
      yaxis: {
        lines: {
          show: false
        }
      },
      xaxis: {
        lines: {
          show: true,
        },
      }
    },
    dataLabels: {
      enabled: false
    },
    fill: {
      gradient: {
        enabled: true,
        opacityFrom: 0.4,
        opacityTo: 0
      }
    },
    markers: {
      size: 0
    },
    tooltip: {
      enabled: true,
      style: {
        fontSize: '20px',
        fontFamily: 'Roboto'
      },
      x: {
        show: true,
        format:'HH:mm'
      },
      y: {
        formatter:(value) => `${value}$`
      },
      marker: {
        show: false,
      },
      theme:'dark'
    },
    ...

Я могу видеть его с темными значениями по умолчанию (например, темный фон и белый цвет шрифта и т. д.), но я не могу заставить его работать со своими собственными.

Заранее спасибо!


reactjs user-interface apexcharts
person lucaswerner    schedule 12.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, добавьте свойство id к родительскому элементу диаграммы, как это.

#chartContainer .apexcharts-tooltip {
  color: #000000;
}

#chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
  background: #ffffff !important;
}
person Smile    schedule 13.10.2019
comment
Я не знал, что нужно будет использовать важный, это не очень хорошо... Но я не нашел другого способа переопределить стиль apexcharts-tooltip-series-group, кроме использования важного (кажется, нет вариант из их API, чтобы изменить это). Спасибо за ответ, он мне очень помог. - person Alexander Santos; 21.12.2020

arrow_upward
0
arrow_downward

Всплывающая подсказка в ApexCharts может быть настроена непосредственно через CSS, поскольку это всего лишь элемент HTML. Измените стиль всплывающей подсказки, переопределив класс .apexcharts-tooltip и любые внутренние элементы внутри него.

person junedchhipa    schedule 14.02.2019
comment
Я попробую! Спасибо! - person lucaswerner; 15.02.2019