syncfusion-react-charts

Syncfusion React Charts の実装

このスキルを使用する場面

次の作業が必要な場合に、このスキルを使用します。

• チャート（エリア、バー、縦棒、折れ線、散布図など）を作成して描画する
• チャートの軸を設定し、外観をカスタマイズする
• ローカルデータやリモートデータ（DataManager）をバインドする、または OData／WebAPI／カスタムアダプターを使用する
• データポイントを動的に追加、削除、置換する（addPoint、removePoint、setData）
• チャートの外観（色、ラベル、凡例、注釈）をカスタマイズする
• データラベルを設定する（シリーズに直接ではなく、marker.dataLabel 内に配置する必要があります）
• ユーザー操作（選択、ズーム、ツールチップ）を実装する
• WebMCP を有効にして、ブラウザのモデルコンテキストや AI エージェントが描画されたチャートを調査、操作できるようにする
• 金融指標とテクニカル分析を追加する
• アクセシビリティと国際化に対応する
• チャートの描画やデータに関する問題をトラブルシューティングする

コンポーネントの概要

Syncfusion React Chart は、幅広いカスタマイズオプションを備えた、20 種類以上のチャートタイプに対応する強力なデータ可視化コンポーネントです。ズーム、選択、ツールチップなどのインタラクティブ機能を備えた、プロフェッショナルなダッシュボード、レポート、分析アプリケーションの構築を目的に設計されています。

主な機能：

• 20 種類以上のチャートタイプ（直交座標、極座標、レーダー、円、ドーナツなど）
• 複数の軸（カテゴリ、数値、日時、対数）
• 金融指標とローソク足チャート
• 高度な操作（ズーム、パン、十字線、ツールチップ）
• レスポンシブデザインとアクセシビリティへの対応
• 印刷とエクスポート機能
• ツールの自動登録、選択したツールの許可リスト、実行制御、AI エージェントによるアクセスを備えた WebMCP との統合

---

ドキュメントとナビゲーションガイド

API リファレンス

📄 参照： references/api-reference.md

• ChartComponent のプロパティを網羅したリファレンス
• すべてのメソッドとイベントに関するドキュメント
• SeriesDirective のプロパティ
• モデルインターフェース（AxisModel、ZoomSettingsModel など）
• モジュールサービス（シリーズタイプ、機能、指標）
• 公式 API ドキュメントへのリンク

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定
• 最初のチャートの作成
• CSS のインポートとテーマの設定
• 基本的なチャートの描画例
• パッケージ構成の概要

チャートタイプ

📄 参照： references/chart-types.md

• 対応する 20 種類以上のチャートタイプの概要
• 各チャートタイプの使用場面
• 代表的なタイプ（折れ線、バー、縦棒、エリア、散布図）の基本例
• タイプごとの設定
• データに適したチャートの選び方

軸とカスタマイズ

📄 参照： references/axes-and-customization.md

• カテゴリ、数値、日時、対数の各軸
• 軸ラベルと書式設定
• 複数軸の設定
• 範囲と間隔の設定
• 軸の交差と配置

シリーズとデータバインディング

📄 参照： references/series-and-data.md

• シリーズの設定とプロパティ
• ローカルデータのバインディングパターン
• DataManager を使用したリモートデータのバインディング
• データアダプター：ODataAdaptor、ODataV4Adaptor、WebApiAdaptor、カスタムアダプター
• オフラインモードと遅延読み込み
• addPoint、removePoint、setData、または React の状態による動的なデータ更新
• 複数シリーズの処理
• データの検証とエッジケース

外観とスタイル設定

📄 参照： references/appearance-and-styling.md

• 凡例の設定と配置
• データラベルと書式設定
• チャートの注釈
• グラデーションと色のカスタマイズ
• タイトル、サブタイトル、説明のスタイル設定

ユーザー操作

📄 参照： references/user-interaction.md

• 選択と強調表示
• ズームとパン
• ツールチップと十字線の設定
• チャートの同期
• イベント処理のパターン

WebMCP と AI エージェントの連携

📄 参照： references/webmcp.md

• React Chart の完全な WebMCP サンプルを生成する
• WebMcpChart をインポートして挿入する
• enableWebMcp={true} を設定し、安定した ChartComponent ID を使用する
• webMcpSettings.name、tools、exposedTo を設定する
• すべての組み込みツールを自動的に登録するか、検証済みのツール名の許可リストで登録を制限する
• getWebMcpTools() は診断、テスト、または直接実行にのみ使用する
• beforeWebMcpToolExecute を使用して、検証、キャンセル、または確認の制御を行う
• WebMCP のリファレンスサンプルで定義されているモジュール挿入リストを維持する
• 手動の登録ボタンを生成したり、registerWebMcpTools() を呼び出したりしない
• 生成したツール名を、検証済みの組み込みツール一覧と照合する

高度な機能

📄 参照： references/advanced-features.md

• 金融チャートの種類（ローソク足、HLOC、高値・安値）
• テクニカル指標（移動平均、トレンドラインなど）
• 複数のペインと指標ペイン
• アクセシビリティ（WCAG 準拠、キーボード操作）
• 国際化とローカライズ

---

クイックスタートの例

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-react-charts';

export default function BasicChart() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 }
  ];

  return (
    <ChartComponent id='charts'>
      <Inject services={[LineSeries, Category, Legend, Tooltip]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

---

よく使われるパターン

パターン 1：複数系列のチャート

同じ軸を共有する複数のデータセットを表示する場合は、SeriesCollectionDirective 内に複数の SeriesDirective コンポーネントを追加します。

<SeriesCollectionDirective>
  <SeriesDirective dataSource={salesData} xName='month' yName='revenue' type='Column' />
  <SeriesDirective dataSource={profitData} xName='month' yName='profit' type='Column' />
</SeriesCollectionDirective>

パターン 2：動的なデータ更新

用途に応じて、次の 3 つの方法があります。

a) React の状態（シンプルな再レンダリング）：

const [data, setData] = useState(initialData);

const handleDataUpdate = () => {
  setData(prev => [...prev, { x: 'Jun', y: 45 }]);
};

<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />

b) addPoint / removePoint / setData（命令型、アニメーションあり）：

const chartRef = useRef(null);

// Add a point
chartRef.current.series[0].addPoint({ x: 'Jun', y: 45 }, 300);

// Remove first point
chartRef.current.series[0].removePoint(0, 300);

// Replace all data
chartRef.current.series[0].setData(newDataArray, 500);

<ChartComponent ref={chartRef} ...>
  <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
</ChartComponent>

パターン 3：リモートデータのバインド

アダプターを備えた DataManager を使用して、REST API または OData サービスのデータをバインドします。

import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
  url: 'your data source URL link',
  adaptor: new WebApiAdaptor()
});

<SeriesDirective dataSource={dataManager} xName='CustomerID' yName='Freight' type='Column' query={new Query()} />

その他のアダプター：ODataAdaptor（OData v3）、ODataV4Adaptor（OData v4）、ODataAdaptor を拡張して作成するカスタムアダプター。

パターン 4：データラベル（マーカー内）

データラベルは、系列に直接ではなく、必ず marker.dataLabel 内に配置します。DataLabel サービスを挿入します。

<Inject services={[LineSeries, Category, DataLabel]} />

<SeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  type='Line'
  marker={{
    visible: true,
    dataLabel: { visible: true, position: 'Top' }
  }}
/>

パターン 5：カスタムツールチップ

書式設定されたツールチップテンプレートで、ユーザーエクスペリエンスを向上させます。

<ChartComponent tooltip={{ enable: true, template: '<div>${point.x}: ${point.y}</div>' }}>

パターン 6：レスポンシブデザイン

コンテナーのスタイルを使用して、チャートをレスポンシブにします。

<ChartComponent id='charts' width='100%' height='400px'>
  {/* chart content */}
</ChartComponent>

---

主要な Props リファレンス

ChartComponent

Prop	型	用途	使用するタイミング
id	string	一意の識別子	各チャートで必須
width	string	チャートの幅（px または %）	レイアウトのサイズを調整する
height	string	チャートの高さ	寸法を明示的に設定する
title	string	チャートのタイトル	メインの見出しを表示する
tooltip	object	ツールチップの設定	対話型のデータ確認
primaryXAxis	object	主 X 軸の設定	横軸を定義する
primaryYAxis	object	主 Y 軸の設定	縦軸を定義する

SeriesDirective

Prop	型	用途	使用するタイミング
dataSource	array | DataManager	データソース	ローカル配列またはリモートの DataManager をバインドする
xName	string	X 軸のプロパティ	データフィールドを X に割り当てる
yName	string	Y 軸のプロパティ	データフィールドを Y に割り当てる
type	string	チャートの種類	可視化の種類を選択する
fill	string	系列の色	系列の色をカスタマイズする
marker	object	マーカーとデータラベルの設定	データポイントのマーカーやデータラベル（marker.dataLabel）を表示する
name	string	系列名	凡例に表示する
query	Query	DataManager のクエリ	リモートデータをフィルター、並べ替え、またはページ分割する

---

一般的なユースケース

1. 営業ダッシュボード：売上を示す縦棒グラフと、傾向を示す折れ線系列を組み合わせます
2. 時系列分析：時系列データには、日付／時刻軸と折れ線グラフを使用します
3. 比較分析：複数系列の縦棒グラフでカテゴリを比較します
4. 財務分析：移動平均インジケーターを備えたローソク足チャートを使用します
5. 分布分析：統計データには、ヒストグラムまたは箱ひげ図を使用します
6. リアルタイム監視：addPoint/removePoint を使用し、滑らかなアニメーションでライブデータを表示します
7. REST API からのリモートデータ：DataManager を WebApiAdaptor または ODataAdaptor と組み合わせて、系列に直接バインドします
8. サーバー側の OData：ODataV4Adaptor と Query を使用して、サーバー側でフィルタリングとページネーションを行います

---

次のステップ

現在のニーズに合ったリファレンスを選択してください。

• API の詳細が必要ですか？ → API リファレンス
• 使い始めるには？ → はじめに
• チャートの種類を選ぶには？ → チャートの種類
• 軸を設定するには？ → 軸とカスタマイズ
• データをバインドするには？ → 系列とデータ
• 外観をスタイリングするには？ → 外観とスタイリング
• インタラクションを追加するには？ → ユーザーインタラクション
• 高度な機能を使うには？ → 高度な機能
• WebMCP または AI エージェントからのアクセスを追加するには？ → WebMCP

外部リソース

• 公式 API ドキュメント： https://ej2.syncfusion.com/react/documentation/api/chart/
• ライブデモ： https://ej2.syncfusion.com/react/demos/
• GitHub リポジトリ： https://github.com/syncfusion/ej2-react-ui-components