apexChartBugFixMobileDotText

ApexCharts 모바일 환경에서 Tooltip marker(dot)가 비정상적으로 크게 표시되어 텍스트와 겹치는 문제를 수정하기 위한 재사용 가능한 패치입니다.

문제

PC에서는 ApexCharts Tooltip의 색상 marker가 정상적으로 표시되지만, 일부 모바일 환경에서는 marker가 크게 렌더링되어 Tooltip 텍스트를 가리는 현상이 발생했습니다.

단순히 다음과 같이 marker의 크기만 줄이는 것으로는 해결되지 않을 수 있습니다.

.apexcharts-tooltip-marker {
    width: 8px !important;
    height: 8px !important;

}



원인은 marker 영역의 크기와 별개로 ::before 등에 의해 큰 원 문자 또는 추가 marker가
렌더링될 수 있기 때문입니다.

해결 방법

큰 원을 만드는 pseudo-element를 제거하고,
실제 .apexcharts-tooltip-marker 자체를 작은 원으로 사용합니다.

.apexcharts-tooltip-marker::before,
.apexcharts-tooltip-marker::after {
    content: none !important;
    display: none !important;
}

.apexcharts-tooltip-marker {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;

    flex: 0 0 8px !important;
    border-radius: 50% !important;
    transform: none !important;

    margin-right: 8px !important;
}



이 방식은 Tooltip이 ApexCharts 렌더링 이후 동적으로 생성되더라도
CSS selector가 적용되므로 별도의 반복 타이머나 MutationObserver 없이 사용할 수 있습니다.

재사용

프로젝트에 포함된 apexChatMobileBugFix.js 또는
apexChatMobileBugFix.css 중 필요한 방식을 사용할 수 있습니다.

JS 방식 예:

<script
  src="./apexChatMobileBugFix.js"
  data-scope="#environmentChart, #rootzoneChart"
  data-max-width="520"
  data-marker-size="8"
  data-gap="8"
  defer>
</script>

다른 차트에 적용할 경우 data-scope에 해당 ApexCharts 컨테이너의 selector를 지정합니다.

예:

data-scope="#myChart"
적용 전
모바일 Tooltip marker가 지나치게 크게 표시됨
marker가 Tooltip 텍스트 영역을 침범
width, height만 변경해도 큰 원이 그대로 남을 수 있음
적용 후
Tooltip marker를 작은 원으로 일정하게 표시
Tooltip 텍스트와 marker가 겹치지 않음
PC 레이아웃에 영향을 주지 않도록 모바일 범위에 한정 가능
ApexCharts가 Tooltip DOM을 동적으로 생성해도 CSS가 적용됨
참고

이 저장소는 실제 모바일 환경에서 발생한 ApexCharts Tooltip 표시 문제를
재현하고 해결한 패치를 정리한 것입니다.

ApexCharts 라이브러리 자체의 모든 버전에서 동일하게 발생하는 버그라고
단정하기보다는, 특정 모바일 렌더링/CSS 조합에서 발생할 수 있는
Tooltip marker 표시 문제에 대한 workaround로 사용하는 것을 권장합니다.