Chart

추이나 항목 간 차이를 시각화하면서 정확한 값을 표로도 제공할 때 사용합니다.

미리보기

일별 방문 수

예시 방문 수를 막대 차트로 비교하고 같은 값을 표에서도 확인합니다.

일별 방문

정확한 값은 원본 표에서 확인하세요.

정확한 데이터 보기

일별 방문
날짜	방문
09-01	140
09-02	220
09-03	175

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/chart

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

ChartContainer에 제목, 설명, 데이터 표를 제공하고 Recharts 차트와 툴팁을 넣으세요. 색상이나 포인터 동작 없이도 계열 이름과 값을 이해할 수 있게 구성합니다.

"use client";

import { Bar, BarChart, XAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/components/ui/chart";

const data = [{ day: "Mon", visits: 120 }, { day: "Tue", visits: 180 }];

export default function Example() {
  return (
    <ChartContainer title="Daily visits" description="Visits by day." tableLabel="View data"
      table={<table><caption>Daily visits</caption><thead><tr><th scope="col">Day</th><th scope="col">Visits</th></tr></thead><tbody>{data.map(row => <tr key={row.day}><th scope="row">{row.day}</th><td>{row.visits}</td></tr>)}</tbody></table>}>
      <BarChart data={data} accessibilityLayer>
        <XAxis dataKey="day" />
        <ChartTooltip />
        <Bar dataKey="visits" name="Visits" fill="var(--primary)" />
      </BarChart>
    </ChartContainer>
  );
}

API 레퍼런스

Recharts의 축과 시리즈를 직접 조합합니다. 차트는 평면으로 읽기 쉽게 유지하고 패널에 뉴모피즘을 적용합니다.

컴포넌트	속성	타입	기본값	설명
`ChartContainer`	`title / description`필수	`string`	`—`	차트 제목과 읽을 수 있는 설명입니다.
`ChartContainer`	`table / tableLabel`필수	`ReactNode / string`	`—`	동일 원본의 데이터 표와 펼치기 문구입니다.
`ChartContainer`	`empty / emptyLabel`	`boolean / string`	`—`	기록이 없을 때 표시할 상태입니다.
`ChartTooltip`	`props`	`Recharts Tooltip props`	`—`	기본 툴팁 옵션을 그대로 전달합니다.

미리보기

일별 방문 수

설치

사용법

API 레퍼런스

접근성