EmptyChart

차트에 표시할 데이터가 없을 때 빈 상태를 표시하는 플레이스홀더 컴포넌트

개요

EmptyChart는 차트 데이터가 비어 있을 때 안내 아이콘과 메시지를 표시하는 빈 상태(Empty State) 컴포넌트입니다. 차트 영역과 동일한 높이를 유지해 데이터 유무에 따른 레이아웃 흔들림을 방지합니다.

주요 특징

• ✅ 빈 상태 표시: 데이터 없음 아이콘 + 안내 텍스트 자동 중앙 정렬
• ✅ 커스텀 텍스트: text prop으로 안내 메시지 변경
• ✅ 높이 지정: height prop으로 차트 영역과 동일한 높이 유지
• ✅ 디자인 토큰: muted-foreground 토큰 기반으로 테마 자동 대응

기본 사용

별도 prop 없이 사용하면 기본 안내 문구(“데이터가 없습니다”)가 표시됩니다.

import { EmptyChart } from "@vortex/ui-cals"
 
<EmptyChart height={200} />

커스텀 텍스트

text prop으로 상황에 맞는 안내 메시지를 표시합니다.

<EmptyChart text="조회된 매출 데이터가 없습니다" height={200} />

높이 지정

height로 컨테이너 높이를 지정합니다. 차트가 렌더링될 영역과 같은 높이로 지정하면 데이터 로딩 전후 레이아웃이 유지됩니다.

<EmptyChart height={120} />
<EmptyChart height={200} />

일반적인 사용 패턴은 데이터 유무에 따라 차트와 교체 렌더링하는 것입니다.

{
  data.length === 0 ? (
    <EmptyChart height={300} text="표시할 데이터가 없습니다" />
  ) : (
    <BarChart data={data} height={300} />
  )
}

API Reference

Props

접근성

권장 사항

• ✅ 아이콘 SVG에 aria-hidden이 적용되어 스크린 리더는 텍스트만 읽음
• ✅ 데이터가 없는 이유나 다음 행동(조회 조건 변경 등)을 텍스트로 안내
• ❌ 텍스트 없이 아이콘만으로 빈 상태를 표현하지 않기

관련 컴포넌트

• BarChart: 데이터가 있을 때 표시하는 바 차트 컴포넌트
• Foundation Empty: 범용 빈 상태 컴포넌트