데이터와 피드백@neumorphism-ui/chart

Chart

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

@neumorphism-ui/chart

미리보기

일별 방문

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

정확한 데이터 보기

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

설치

npx shadcn@latest add @neumorphism-ui/chart

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

export default function Example() {
  const data = [{ date: "09-01", visits: 140 }, { date: "09-02", visits: 220 }, { date: "09-03", visits: 175 }];
  return <ChartContainer title="일별 방문" description="예시 데이터. 정확한 값은 표에서 확인하세요." tableLabel="데이터 보기" table={<table><caption>일별 방문</caption><thead><tr><th scope="col">날짜</th><th scope="col">방문</th></tr></thead><tbody>{data.map(row => <tr key={row.date}><th scope="row">{row.date}</th><td>{row.visits}</td></tr>)}</tbody></table>}>
    <BarChart data={data} accessibilityLayer><XAxis dataKey="date" /><ChartTooltip /><Bar dataKey="visits" name="방문" fill="var(--primary)" isAnimationActive={false} /></BarChart>
  </ChartContainer>;
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성