Neumorphism UI

Chart

傾向や比較を図で示し、正確な値を表でも提供する場合に使います。

プレビュー

日別の訪問数

例示用の訪問数を棒グラフで比較し、同じ値を表でも確認します。

日別訪問数

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

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

インストール

この 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の軸と系列を直接組み合わせます。データは平面的に読みやすくし、周囲の表面に深度を付けます。

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

アクセシビリティ

  • 01

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

  • 02

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