如何更改 Apexchart 中的 Xaxis 工具提示样式？

Question

我在React中做了一个折线图，尝试看起来像Figma的风格。我需要更改 Xaxis 工具栏的样式。

这是我的图表工具栏。

这是 Figma 图表工具栏。

我的xaxis图表代码

  xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      labels: {
        show: true,
        style: {
          colors: "#D2D2D2",
        },
      },
      crosshairs: {
        width: 1,
        stroke: {
          color: "#1F51C1",
          dashArray: 0,
        },
      },
      axisTicks: {
        show: false,
      },
      tooltip: {},
    },

Answer 1

尝试在 css 中编辑 apexcharts-xaxistooltip class。下面的代码应该可以工作

.apexcharts-xaxistooltip{
  background: transparent;  // recommend changing color to be the same as that of the char
  border: none;
  color: #2b63dc;
  margin-top: 4px;
  padding-bottom: 0;
  font-weight: bold;
}
.apexcharts-xaxistooltip-bottom:before{
  opacity: 0  // hide arrow
}
.apexcharts-xaxistooltip-bottom:after{
  opacity: 0  // hide arrow
}

如何更改 Apexchart 中的 Xaxis 工具提示样式？

How can I change Xaxis tooltip style in Apexchart?

javascript

charts

linechart

apexcharts