Neumorphism UI
データとフィードバック@neumorphism-ui/chart

Chart

Rechartsの軸と系列を直接組み合わせます。データは平面的に読みやすくし、周囲の表面に深度を付けます。

@neumorphism-ui/chart
Registry JSON

プレビュー

日別訪問数

正確な値は元データの表で確認してください。

正確なデータを見る
日別訪問数
日付訪問
09-01140
09-02220
09-03175

インストール

インストール: chartnpx shadcn@latest add @neumorphism-ui/chart

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

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

Example

Chart の使用コード
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 リファレンス

コンポーネントプロパティ型デフォルト説明
ChartContainertitle / description必須string—読みやすいタイトルと説明。
ChartContainertable / tableLabel必須ReactNode / string—同じ元データの表と開閉ラベル。
ChartContainerempty / emptyLabelboolean / string—記録がない場合の表示。
ChartTooltippropsRecharts Tooltip props—RechartsのTooltipオプションを渡します。

アクセシビリティ

  • 01

    accessibilityLayer、線の形、ラベル、元データの表を併用してください。

  • 02

    例ではアニメーションを無効にします。独自の系列のモーションはアプリで管理します。