ApexCharts에서 mounted만으로 DOM 보정이 안 되는 이유

처음에는 차트가 마운트될 때만 legend 영역의 padding을 보정해 주면 충분할 거라고 생각했다.
차트가 한 번 그려지면 DOM 구조가 유지될 거라고 예상했기 때문이다.

그래서 처음에는 다음과 같이 mounted 이벤트에서만 padding 보정 함수를 호출했다.

mounted: () => {
  fixLegendPadding();
}

초기 렌더링에서는 문제가 없었다.
하지만 legend를 끄거나 다시 켰을 때, 적용해 둔 padding이 사라지는 현상이 발생했다.

문제 현상

• 차트 최초 진입 시 → padding 정상
• legend off → padding 사라짐
• legend on → 여전히 복구되지 않음

즉, 차트는 그대로인데 스타일만 날아간 것처럼 보였다.

원인: ApexCharts는 업데이트 시 DOM을 다시 그린다

ApexCharts는 내부 상태(legend, toolbar, zoom 등)가 변경되면
기존 DOM을 그대로 유지하지 않고, 관련 영역을 다시 렌더링한다.

padding-right 사라짐

 

이 과정에서:

• legend DOM이 새로 생성되고
• 내가 직접 수정했던 padding 스타일은 사라진다

즉,

mounted 시점에만 DOM을 수정하면,
이후 ApexCharts 내부 업데이트를 따라가지 못한다

 

해결: updated 이벤트까지 함께 사용

이 문제를 해결하려면
차트 최초 생성 시점 + 내부 업데이트 시점 모두에서 padding을 다시 적용해야 한다.

 

mounted: () => {
  fixLegendPadding();
},
updated: () => {
  fixLegendPadding();
}

이렇게 처리하면:

• 최초 렌더링 시 padding 적용
• legend on/off
• toolbar interaction
• 차트 컨테이너 size 변경 (반응형)
  padding이 유지된다.

 

왜 updated가 반응형까지 커버할 수 있을까

ApexCharts는 차트의 크기가 변경되면 단순히 CSS만 조정하지 않고, 내부적으로 차트를 다시 계산하고 렌더링한다.

이 과정 역시 update 사이클로 처리되기 때문에 updated 이벤트가 호출된다.

그래서 updated는 단순히 “데이터 변경”이 아니라 차트 구조가 다시 계산되는 모든 시점을 커버하는 이벤트로 보는 게 맞다.

참고: rendered 이벤트는 언제 의미가 있을까

ApexCharts에는 rendered 이벤트도 존재한다.

이 이벤트는 차트가 완전히 렌더링된 이후, 정확히는 렌더 애니메이션이 끝난 시점에 호출된다.

그래서 rendered는 다음과 같은 경우에만 의미가 있다.

• 차트 렌더 애니메이션이 켜져 있는 경우
• 애니메이션 완료 이후 DOM 접근이 필요한 경우