文章/答案/技术大牛

发布

社区首页 >问答首页 >Apexcharts工具提示样式不适用

问Apexcharts工具提示样式不适用
EN

Stack Overflow用户

提问于 2019-02-13 02:57:29

回答 2查看 5.7K关注 0票数 1

我正在尝试使用React中的ApexCharts将一些基本样式应用到我的工具提示中。

这是我的配置：

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

回答 2

Stack Overflow用户

发布于 2019-10-13 22:21:36

请将id属性添加到图表元素的父级，如下所示。

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

#chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
  background: #ffffff !important;
}

票数 1

Stack Overflow用户

发布于 2019-02-14 17:26:23

ApexCharts中的工具提示可以通过CSS直接定位，因为它只是一个HTML元素。通过覆盖.apexcharts-tooltip类及其内部的任何内部元素来更改工具提示样式。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54656926

复制

相似问题

问Apexcharts工具提示样式不适用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Apexcharts工具提示样式不适用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Apexcharts工具提示样式不适用
EN