チャート

Chartコンポーネントは、データの可視化のためのバーチャートとラインチャートを提供する再利用可能なUIコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• チャートタイプ: バーチャートとラインチャートの2種類
• データ表示: ラベル、値、凡例の表示制御
• カスタマイズ: カスタムカラー、サイズ、高さの設定
• レスポンシブ: 様々な画面サイズに対応
• アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
• テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

---
import { Chart } from '@karan-monorepo/ui-core';
---

<kds-chart
  data={[
    { label: "1月", value: 25, color: "#3b82f6" },
    { label: "2月", value: 18, color: "#10b981" },
    { label: "3月", value: 32, color: "#f59e0b" }
  ]}
  options={{
    type: "bar",
    showLabels: true,
    showValues: true,
    showLegend: true,
    height: 300,
    width: 400
  }}
  theme="light"
></kds-chart>

プロパティ

data

チャートに表示するデータの配列。

interface ChartData {
  label: string;    // データのラベル
  value: number;    // データの値
  color?: string;   // カスタムカラー（オプション）
}

options

チャートの表示オプション。

interface ChartOptions {
  type?: 'bar' | 'line';           // チャートタイプ
  showLabels?: boolean;            // ラベル表示
  showValues?: boolean;            // 値表示
  showLegend?: boolean;            // 凡例表示
  height?: number;                 // 高さ（px）
  width?: number;                  // 幅（px）
}

theme

テーマの設定。

type ComponentTheme = 'light' | 'dark';

使用例

Chart Component

Chart component for displaying data visualizations with various chart types.

Chart Types

Bar Chart

Line Chart

Pie Chart

With Values and Labels

With Values

With Legend

Themes

Light Theme

Dark Theme

Usage Examples

Sales Dashboard

Traffic Sources

バリエーション

Chartコンポーネントは2つのチャートタイプをサポートします：

• bar: バーチャート
• line: ラインチャート

バーチャート

<kds-chart
  data={[
    { label: "月", value: 12 },
    { label: "火", value: 8 },
    { label: "水", value: 15 }
  ]}
  options={{
    type: "bar",
    showLabels: true,
    showValues: true,
    showLegend: false
  }}
  theme="light"
></kds-chart>

ラインチャート

<kds-chart
  data={[
    { label: "1月", value: 12 },
    { label: "2月", value: 8 },
    { label: "3月", value: 15 }
  ]}
  options={{
    type: "line",
    showLabels: true,
    showValues: false,
    showLegend: false
  }}
  theme="light"
></kds-chart>

凡例付きチャート

<kds-chart
  data={[
    { label: "胸", value: 25, color: "#3b82f6" },
    { label: "背中", value: 20, color: "#10b981" },
    { label: "脚", value: 20, color: "#f59e0b" }
  ]}
  options={{
    type: "bar",
    showLabels: true,
    showValues: true,
    showLegend: true
  }}
  theme="light"
></kds-chart>

使用ケース

ダッシュボード

<div class="dashboard-charts">
  <kds-chart
    data={[
      { label: "1月", value: 25 },
      { label: "2月", value: 18 },
      { label: "3月", value: 32 },
      { label: "4月", value: 28 }
    ]}
    options={{
      type: "bar",
      showLabels: true,
      showValues: true,
      showLegend: false,
      height: 300,
      width: 400
    }}
    theme="light"
  />

  <kds-chart
    data={[
      { label: "売上", value: 45, color: "#3b82f6" },
      { label: "利益", value: 30, color: "#10b981" },
      { label: "コスト", value: 25, color: "#f59e0b" }
    ]}
    options={{
      type: "bar",
      showLabels: true,
      showValues: true,
      showLegend: true,
      height: 300,
      width: 400
    }}
    theme="light"
  />
</div>

データ分析

<kds-chart
  data={[
    { label: "Q1", value: 120 },
    { label: "Q2", value: 150 },
    { label: "Q3", value: 180 },
    { label: "Q4", value: 200 }
  ]}
  options={{
    type: "line",
    showLabels: true,
    showValues: true,
    showLegend: false,
    height: 400,
    width: 600
  }}
  theme="light"
></kds-chart>

スタイリング

Chartコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Chartコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの構造
• キーボードナビゲーションサポート
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応の構造

ベストプラクティス

1. 適切なラベル: データのラベルは簡潔で理解しやすくする
2. 値の範囲: データの値は適切な範囲内に収める
3. カラーの選択: アクセシビリティを考慮したカラーパレットを使用する
4. 凡例の活用: 複数のデータセットがある場合は凡例を表示する
5. 両方のテーマでテスト: 良好なコントラストと可読性を確保する

ブラウザサポート

Chartコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Flexbox
• CSS Grid