Search code examples
htmlcssreactjsapexcharts

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

I want to remove the gaps between the title and the graphs by moving the title a little bit below the current position.

apexcharts graph and title gaps

What i did is i inspected the element first and found that the title is declared in this html element

<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>

so after i got the class name, i try to modify class .apexcharts-title-text to change its position:

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

but nothing happened. The position of the title stays the same. What make me puzzled is, when i try to apply another style, it works

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

I realize that font-size is part of style that can be modified in title options here https://apexcharts.com/docs/options/title/. So is it possible to apply the style outside options mentioned there ? Thanks in advance!

Solution

  • ApexCharts API offers title option (docs), therefore there isn't need to manipulate with css.

    You can configure your chart title position just by changing title.offsetY for example.