如何编辑 apexchart 图表中的标题填充/边距？

Question

我想通过将标题移动到当前位置下方一点点来消除标题和图表之间的间隙。

apexcharts graph and title gaps

我所做的是先检查元素，发现标题是在这个 html 元素中声明的

<text id="SvgjsText35758" font-family="Helvetica, Arial, sans-serif" x="330.5" y="16.5" text-anchor="middle" dominant-baseline="auto" font-size="14px" font-weight="900" fill="#373d3f" class="apexcharts-title-text" style="font-family: Helvetica, Arial, sans-serif; opacity: 1;">W'lands JB to SG 1 Week Ago</text>

所以在我得到 class 名称后，我尝试修改 class .apexcharts-title-text 来改变它的位置：

.apexcharts-title-text {
  padding-top: 1em;
}

但什么也没发生。标题的位置保持不变。让我感到困惑的是，当我尝试应用另一种样式时，它起作用了

.apexcharts-title-text {
  font-size: 1em;
}

我知道 font-size 是样式的一部分，可以在此处的标题选项中修改 https://apexcharts.com/docs/options/title/。那么是否可以在此处提到的选项之外应用样式？提前致谢！

Answer 1

ApexCharts API 提供 title 选项 (docs)，因此无需使用 css.

进行操作

例如，您可以通过更改 title.offsetY 来配置图表标题位置。

如何编辑 apexchart 图表中的标题填充/边距？

How to edit the title padding / margin in apexchart graphs?

html

css

reactjs

apexcharts