syncfusion-react-stock-chart

Syncfusion React 株価チャートの実装

Stock Chart コンポーネントは、時間の経過に伴う株価の変動を可視化するための、金融向けに特化したチャートです。ローソク足／OHLC の表示、日付範囲をすばやく移動するための期間セレクター、データを正確に絞り込むための範囲セレクター、テクニカル指標、ツールチップや十字線などのインタラクティブなツールなど、金融データの分析に欠かせない機能を備えています。

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

次のような場合に、このスキルを使用してください。

• 金融データ／株式データを可視化する - 株価、取引高、市場の動きを表示する
• OHLC データを表示する - ローソク足チャートまたは Hilo チャートで始値、高値、安値、終値を表示する
• 期間ナビゲーションを実装する - 期間範囲をすばやく切り替えるボタン（1D、5D、1M、6M、YTD、1Y、ALL）を追加する
• 範囲選択を有効にする - つまみを操作して、ユーザーが特定の日付範囲を選択できるようにする
• テクニカル分析を追加する - テクニカル指標（SMA、EMA、RSI、MACD など）を含める
• 株式イベントを表示する - 決算、配当、株式分割などの市場イベントを可視化する
• 金融ダッシュボードを作成する - 包括的な株式分析インターフェイスを構築する
• 時系列データを表示する - 日時ベースの金融データや取引データを表示する

コンポーネントの概要

パッケージ: @syncfusion/ej2-react-charts
コンポーネント: StockChartComponent
主な機能:

• 6 種類の系列（Line、Spline、Hilo、HiloOpenClose、Candle、Hollow Candle）
• 日付範囲をすばやく移動できる組み込みの期間セレクター
• 正確な範囲選択が可能な、つまみ付きの範囲ナビゲーター
• テクニカル指標（20 種類以上）と indicatorType のサポート
• 株式イベントの注釈（stockEvents）と stockEventRender
• インタラクティブなツールチップ、十字線（トラックボール）、凡例
• 選択と操作：selectionMode、isMultiSelect、selectedDataIndexes
• ズームとパン（zoomSettings、onZooming）
• 画像／PDF へのエクスポートと印刷機能（exportType、Export、Print）
• 永続化と RTL のサポート（enablePersistence、enableRtl）
• レスポンシブでアクセシブル（WCAG、ARIA、キーボードナビゲーション）

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

はじめに

📄 参照: references/getting-started.md

初期設定については、まずこちらをお読みください。

• @syncfusion/ej2-react-charts パッケージのインストール
• Vite または create-react-app を使用したプロジェクトのセットアップ
• 基本的な StockChartComponent の実装
• モジュールのインジェクションパターン（サービスの Inject）
• サンプルデータを使った最初のチャートの作成
• データ構造（x、open、high、low、close、volume）の理解
• チャートタイトルと基本設定の追加

軸の種類と設定

📄 参照: references/configuration.md

軸を設定およびカスタマイズする場合はこちらをお読みください。

• DateTime Axis - 日付／時刻ベースの X 軸（株価チャートで最も一般的）
• DateTimeCategory Axis - 営業日のみを表示（週末／祝日を除外）
• Logarithmic Axis - 値の範囲が広い場合に使う対数スケール
• Numeric Axis - Y 値に使用する標準的な数値軸
• 軸のタイトル、ラベル、書式設定
• グリッド線と目盛りのカスタマイズ
• 異なるデータスケールに対応する複数の Y 軸
• 軸の範囲と余白の設定

系列の種類と可視化

📄 参照: references/series-types.md

チャートの系列を選択して設定する場合はこちらをお読みください。

• Line series - 連続的な株価ライン
• Spline series - 滑らかな曲線
• Hilo series - 高値と安値の範囲を示すバー
• HiloOpenClose series - OHLC バー
• Candle series - 従来型のローソク足（株価チャートの既定）
• Hollow Candle series - 株価の動きに応じて塗りつぶし／中抜きで表示するローソク足
• ローソク足のベア／ブルの塗りつぶし色
• 系列のドロップダウンナビゲーションと種類の切り替え
• 各系列の種類に必要なモジュールのインジェクション
• 各種類の使い分け

期間セレクターと範囲セレクター

📄 参照： references/selectors.md

時間範囲のナビゲーションを実装するには：

• 期間セレクター： クイックナビゲーションボタン（1D、5D、1M など）
  • 期間配列の設定（interval、text、intervalType）
  • IntervalType のオプション（Years、Months、Weeks、Days、Hours など）
  • 期間セレクターの有効化／無効化
• 範囲セレクター： ハンドルを使った正確な範囲選択
  • ハンドルのナビゲーションとドラッグ
  • ラベルをタップして範囲を選択
  • 日付範囲ボタンとの連携
  • 範囲セレクターの有効化／無効化

インタラクティブ機能とイベント

📄 参照： references/interactive-features.md

ユーザー操作と視覚的なフィードバックを追加するには：

• 凡例： 系列情報を表示
  • 位置と配置のオプション（Top、Bottom、Left、Right、Custom）
  • カスタマイズ（サイズ、形状、色、アイコン）
  • 凡例のタイトルとテンプレート
  • 凡例のクリック／描画イベント
• ツールチップ： ホバー時にポイントデータを表示
  • トークン（${point.x}、${point.open} など）を使った書式のカスタマイズ
  • 位置の制御（Auto、Nearest）
  • 外観のスタイル設定（fill、border、textStyle）
  • 複数系列で共有するツールチップ
  • ヘッダーとカスタム書式設定
• クロスヘア： 値を正確に読み取るための垂直／水平線
  • 両軸の軸値を表示するクロスヘアツールチップ
  • 線のカスタマイズ（width、color、dashArray）
  • データにスナップして操作性を向上
  • 系列間でツールチップを共有するトラックボールモード
  • 線の種類（Both、Vertical、Horizontal）
• マウスイベント： 包括的な操作の追跡
  • データポイント操作用の pointClick、pointMove
  • stockChartMouseMove、stockChartMouseClick など
  • UI のクリーンアップ用の stockChartMouseLeave
  • セレクターの更新に伴う範囲変更イベント

テクニカル分析ツール

📄 参照： references/technical-analysis.md

金融分析機能：

• 株式イベント： 市場の重要なイベントに注釈を付ける
  • イベントの種類（Flag、Circle、Square、Triangle など）
  • カスタマイズ可能な色と形状のイベントマーカー
  • イベントの説明とツールチップ
  • 特定の系列を対象としたイベント
  • カスタムスタイル設定用の stockEventRender イベント
  • イベントの表示制御
• テクニカル指標： 分析用のオーバーレイを追加
  • 10 種類以上の指標：
    • 移動平均：SMA、EMA、TMA
    • モメンタム：RSI、MACD、Stochastic、Momentum
    • 出来高：Accumulation Distribution、ATR
    • 高度な指標：Bollinger Bands
  • 指標の設定とスタイル設定
  • 1 つのチャートに複数の指標を表示
  • フィールドの選択（Open、High、Low、Close）
  • 期間と標準偏差のカスタマイズ
• トレンドライン： トレンド分析用の線を描画
  • 6 種類のトレンドライン：Linear、Exponential、Logarithmic、Polynomial、Power、MovingAverage
  • 線の設定（始点／終点、系列のバインド）
  • スタイル設定とカスタマイズ（color、width、dashArray）
  • 系列ごとに複数のトレンドラインを設定
  • 多項式の次数をカスタマイズ
  • 移動平均の期間を設定

ツールチップ、クロスヘア、軸の設定

📄 参照： references/interactive-features.md および references/configuration.md

ツールチップとクロスヘアを設定するには：

• ツールチップの設定： ポイントのホバー情報
  • enable プロパティで有効化／無効化
  • OHLC データ表示用の書式文字列
  • 背景色と境界線のスタイル設定
  • テキストスタイルのカスタマイズ
  • 位置モード（Auto、Nearest）
• クロスヘア線： 値を正確に読み取る
  • enable: true でクロスヘアを有効化
  • 線の種類：Both、Vertical、Horizontal
  • 線のカスタマイズ（width、color、dashArray）
  • データポイントへのスナップによる位置合わせ
  • クロスヘア線のスタイル設定
• 軸ツールチップ： 軸の値を表示
  • primaryXAxis の crosshairTooltip で有効化
  • primaryYAxis の crosshairTooltip で有効化
  • 塗りつぶし色とテキストスタイルのカスタマイズ
  • 軸の値の表示形式を設定

チャートの設定とスタイル

📄 参照： references/configuration.md

チャートの外観と動作をカスタマイズする場合：

• 軸の設定： X 軸と Y 軸を設定します
  • 軸の種類：DateTime（デフォルト）、DateTimeCategory、Logarithmic、Numeric
  • ラベルの書式と間隔
  • axes 配列による複数軸のサポート
  • 軸の範囲、パディング、グリッド線
  • 主目盛り／補助目盛りとグリッドのカスタマイズ
• チャートのサイズ： サイズを制御します
  • 幅と高さのプロパティ（ピクセルまたはパーセンテージ）
  • レスポンシブなサイズ設定の方法
  • コンテナーに基づくサイズ設定
• 外観： テーマとスタイル
  • 組み込みテーマ（Material、Fabric、Bootstrap、HighContrast など）
  • 背景と枠線のカスタマイズ
  • チャート領域のスタイル設定
  • マージンとパディングの設定
  • タイトルとタイトルのスタイル設定
• グラデーション塗りつぶし： 高度なスタイル設定
  • 線形グラデーション（x1、y1、x2、y2 の停止位置）
  • 放射状グラデーション（cx、cy、r の停止位置）
  • 系列の塗りつぶしに対するグラデーション
  • SVG グラデーション定義

エクスポート、印刷、アクセシビリティ

📄 参照： references/utilities.md

エクスポート機能とアクセシビリティについて：

• エクスポート： チャートをファイルとして保存します
  • PNG、JPEG、SVG 形式でエクスポート
  • PDF 形式でエクスポート
  • 設定オプション
• 印刷： チャートを直接印刷します
  • 印刷メソッドとオプション
• アクセシビリティ： WCAG 準拠
  • キーボード操作
  • ARIA 属性
  • スクリーンリーダーのサポート
  • アクセシブルな配色

クイックスタート

基本的な株価チャート

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, LineSeries, SplineSeries, 
         CandleSeries, HiloOpenCloseSeries, HiloSeries, 
         RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  const data = [
    { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },
    { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },
    { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 },
    // ... more data
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='AAPL Stock Price'
      primaryXAxis={{ valueType: 'DateTime' }}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, 
                         SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, 
                         RangeAreaSeries, Trendlines]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
          volume='volume'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

export default App;

期間セレクター付き株価チャート

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [ /* stock data */ ];
  
  const periods = [
    { intervalType: 'Days', interval: 1, text: '1D' },
    { intervalType: 'Days', interval: 5, text: '5D' },
    { intervalType: 'Months', interval: 1, text: '1M' },
    { intervalType: 'Months', interval: 3, text: '3M' },
    { intervalType: 'Months', interval: 6, text: '6M' },
    { intervalType: 'Years', interval: 1, text: '1Y' },
    { text: 'All' }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      periods={periods}
      enablePeriodSelector={true}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

株価チャートの CSS スタイル設定

株価チャートの期間セレクター UI を正しく動作させるには、HTML ファイルに必要な CSS スタイルシートを含める必要があります。次の <link> タグを index.html の <head> セクションに追加してください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
    
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <title>Stock Chart App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

主要な CSS スタイルシート：

1. Syncfusion Tailwind CSS（tailwind3.css）- 株価チャートのコンポーネントに必要です

   • バージョン：33.1.44（Syncfusion のバージョンに合わせて更新してください）
   • 期間セレクターのボタン、レンジナビゲーター、ツールチップ、その他の UI 要素のスタイルを提供します
   • CDN URL：https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css

2. Bootstrap CSS - 追加のスタイルサポートに任意で使用できますが、推奨されます

   • バージョン：3.3.7
   • 基本的なスタイルとレイアウト用のユーティリティを提供します
   • CDN URL：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

重要な注意事項：

• Syncfusion CSS のバージョンが @syncfusion/ej2-react-charts パッケージのバージョンと一致していることを確認してください
• 別のテーマ（Material、Bootstrap、Fabric、HighContrast）を使用する場合は、Syncfusion CDN から対応する CSS ファイルを使用してください
• CSS のカスケードと上書きを適切に適用するため、これらのスタイルシートは他のカスタムスタイルシートより前に配置してください
• これらのスタイルシートがない場合、期間セレクターのボタン、ツールチップ、その他の UI 要素が正しく表示されないことがあります

テーマ別の代替 CSS URL：

• Material：https://cdn.syncfusion.com/ej2/33.1.44/material.css
• Bootstrap：https://cdn.syncfusion.com/ej2/33.1.44/bootstrap.css
• Fabric：https://cdn.syncfusion.com/ej2/33.1.44/fabric.css
• Tailwind：https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css
• HighContrast：https://cdn.syncfusion.com/ej2/33.1.44/highcontrast.css

軸の種類のリファレンス

株価チャートは、さまざまなデータの用途に対応する複数の軸の種類をサポートしています。

DateTime 軸（デフォルト）

日付ベースの株価データに使用します：

primaryXAxis={{ 
  valueType: 'DateTime',
  majorGridLines: { width: 0 },
  majorTickLines: { color: 'transparent' }
}}

最適な用途： 日付付きの株価データ 注入： DateTime モジュール

DateTimeCategory 軸

営業日のみを表示します（週末／祝日を除外します）：

primaryXAxis={{ 
  valueType: 'DateTimeCategory',
  majorGridLines: { width: 0 }
}}

最適な用途： 営業日のみの取引データ 注入： DateTimeCategory モジュール 注： DateTimeCategory モジュールのインポートと注入が必要です

Logarithmic 軸

対数スケールの Y 軸に使用します（値の範囲が広い場合に便利です）：

primaryYAxis={{
  valueType: 'Logarithmic',
  labelFormat: '${value}'
}}

最適な用途： 複数の桁にわたるデータ 注入： Logarithmic モジュール 注： ゼロまたは負の値は含められません

数値軸（Y 軸のデフォルト）

標準的な線形数値スケール：

primaryYAxis={{
  valueType: 'Double',
  labelFormat: '${value}',
  minimum: 0,
  maximum: 500,
  interval: 50
}}

最適な用途： 価格の値および一般的な Y 軸 モジュールの注入は不要です — これがデフォルトです

複数軸の設定

スケールの異なる複数の Y 軸を使用します：

<StockChartComponent
  primaryXAxis={{ valueType: 'DateTime' }}
  primaryYAxis={{ title: 'Price', labelFormat: '${value}' }}
>
  {/* Additional axes using StockChartAxesDirective */}
  <StockChartAxesDirective>
    <StockChartAxisDirective
      name='volumeAxis'
      opposedPosition={true}
      title='Volume'
      labelFormat='{value}M'
    />
  </StockChartAxesDirective>
  
  {/* Series bind to respective axes */}
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type='Candle' yAxisName='primaryYAxis' />
    <StockChartSeriesDirective type='Column' yAxisName='volumeAxis' />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>

一般的なパターン

パターン 1：複数の機能を備えた金融ダッシュボード

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries, StockLegend, 
         Export, Print } from '@syncfusion/ej2-react-charts';

function FinancialDashboard() {
  const handlePointClick = (args) => {
    console.log(`Point clicked: ${args.x}, Value: ${args.y}`);
  };

  const handleMouseMove = (args) => {
    console.log('Mouse moved over chart');
  };

  const handleRangeChange = (args) => {
    console.log(`Range changed: ${args.start} to ${args.end}`);
  };

  return (
    <StockChartComponent
      id='stockchart'
      title='Comprehensive Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      tooltip={{ enable: true, shared: true }}
      crosshair={{ enable: true }}
      legendSettings={{ visible: true }}
      enablePeriodSelector={true}
      enableSelector={true}
      pointClick={handlePointClick}
      stockChartMouseMove={handleMouseMove}
      rangeChange={handleRangeChange}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                         CandleSeries, StockLegend, Export, Print]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          name='Apple Inc'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

パターン 2：弱気・強気の色とアニメーションを備えたローソク足

function StyledCandleChart() {
  const stockData = [ /* stock data with open, high, low, close */ ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      primaryYAxis={{ labelFormat: '${value}' }}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          xName='x'
          open='open'
          high='high'
          low='low'
          close='close'
          bearFillColor='#ef5350'      // Red for downtrend
          bullFillColor='#26a69a'      // Green for uptrend
          animation={{ enable: true, duration: 500 }}
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

パターン 3：テクニカル分析チャート

function TechnicalAnalysisChart() {
  const indicators = [
    {
      type: 'Sma',
      field: 'Close',
      period: 14,
      fill: 'blue'
    },
    {
      type: 'BollingerBands',
      field: 'Close',
      period: 20,
      standardDeviation: 2,
      upperLine: { color: '#ff0000', width: 1 },
      lowerLine: { color: '#ff0000', width: 1 }
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      indicators={indicators}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, 
                         LineSeries, RangeTooltip, SmaIndicator, BollingerBands]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
      <StockChartIndicatorsDirective>
        {/* Indicators can also be added here via directives */}
      </StockChartIndicatorsDirective>
    </StockChartComponent>
  );
}

パターン 4：軸ツールチップ付きクロスヘア

function CrosshairChart() {
  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ 
        valueType: 'DateTime',
        majorGridLines: { width: 0 },
        majorTickLines: { color: 'transparent' },
        crosshairTooltip: { enable: true }  // X-axis tooltip
      }}
      primaryYAxis={{
        labelFormat: 'n0',
        majorTickLines: { width: 0 },
        crosshairTooltip: { enable: true }  // Y-axis tooltip
      }}
      crosshair={{ 
        enable: true,
        lineType: 'Both',
        line: { width: 1, color: '#0080ff' }
      }}
      tooltip={{ enable: true }}
    >
      <Inject services={[DateTime, CandleSeries, Crosshair, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

パターン 5：株式イベントの可視化

function StockEventsChart() {
  const stockEvents = [
    {
      date: new Date('2012-04-01'),
      text: 'Q1 Earnings',
      description: 'Quarterly earnings release',
      type: 'Flag',
      background: '#6c757d'
    },
    {
      date: new Date('2012-07-01'),
      text: 'Dividend',
      description: 'Dividend payout',
      type: 'Circle',
      background: '#28a745'
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      stockEvents={stockEvents}
    >
      <Inject services={[DateTime, SplineSeries, Tooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Spline'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

パターン 6：エクスポートと印刷

function ExportableChart() {
  const chartRef = useRef<StockChartComponent>(null);

  const handleExport = (type: string) => {
    if (chartRef.current) {
      chartRef.current.export(type, 'StockChart');
    }
  };

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print();
    }
  };

  return (
    <div>
      <div>
        <button onClick={() => handleExport('PNG')}>Export PNG</button>
        <button onClick={() => handleExport('JPEG')}>Export JPEG</button>
        <button onClick={() => handleExport('SVG')}>Export SVG</button>
        <button onClick={() => handleExport('PDF')}>Export PDF</button>
        <button onClick={handlePrint}>Print Chart</button>
      </div>
      
      <StockChartComponent
        ref={chartRef}
        id='stockchart'
        primaryXAxis={{ valueType: 'DateTime' }}
        exportType={['PNG', 'JPEG', 'SVG', 'PDF']}
      >
        <Inject services={[DateTime, CandleSeries, Export]} />
        <StockChartSeriesCollectionDirective>
          <StockChartSeriesDirective 
            dataSource={stockData} 
            type='Candle'
          />
        </StockChartSeriesCollectionDirective>
      </StockChartComponent>
    </div>
  );
}

主な Props

StockChartComponent

Prop	Type	Description
primaryXAxis	Object	X 軸の設定（通常は DateTime）
primaryYAxis	Object	Y 軸の設定
axes	Array	複数軸のスケーリングに使用する追加の Y 軸
title	string	チャートのタイトル
titleStyle	Object	タイトルのフォントスタイル
periods	Array	期間セレクターのボタン設定
enablePeriodSelector	boolean	期間セレクターの表示／非表示（デフォルト：true）
enableSelector	boolean	範囲セレクターの表示／非表示（デフォルト：true）
enableCustomRange	boolean	カスタム日付範囲の選択を有効にする
tooltip	Object	ツールチップの設定
crosshair	Object	クロスヘアの設定
legendSettings	Object	凡例の設定
stockEvents	Array	株価イベントのマーカー
indicators	Array	テクニカル指標
height	string	チャートの高さ
width	string	チャートの幅
margin	Object	チャートの余白設定
chartArea	Object	チャート領域のスタイル
background	string	チャートの背景色
border	Object	チャートの枠線設定
theme	string	チャートのテーマ
zoomSettings	Object	ズームとパンの設定
rows	Array	複数行レイアウトの行定義
selectedDataIndexes	Array	特定のポイントをプログラムで選択
selectionMode	string	選択モード（None、Point、Series、Cluster、DragXY、DragX、DragY）
isMultiSelect	boolean	複数のデータポイントの選択を許可
exportType	Array	エクスポート形式（PNG、JPEG、SVG、PDF）
enablePersistence	boolean	ページの再読み込み後もチャートの状態を保持
enableRtl	boolean	右から左への描画を有効にする
locale	string	グローバルなカルチャ／ローカライズ設定を上書き
noDataTemplate	string/Function	データがない場合に表示するテンプレート
isTransposed	boolean	チャートを転置して描画
seriesType	Array	使用可能な系列タイプ
indicatorType	Array	使用可能なテクニカル指標タイプ
trendlineType	Array	使用可能なトレンドラインタイプ
bearFillColor	string	下降トレンド（ベア）ローソク足の塗りつぶし色
bullFillColor	string	上昇トレンド（ブル）ローソク足の塗りつぶし色
animation	Object	系列の描画アニメーション設定
pointClick	Function	データポイントのクリック時に発生するイベント
stockChartMouseMove	Function	チャート上でマウスが移動したときに発生するイベント
stockChartMouseClick	Function	チャート領域のクリック時に発生するイベント
stockChartMouseDown	Function	マウスボタンを押したときに発生するイベント
stockChartMouseUp	Function	マウスボタンを離したときに発生するイベント
stockChartMouseLeave	Function	カーソルがチャートから離れたときに発生するイベント
tooltipRender	Function	表示前にツールチップをカスタマイズするイベント
axisLabelRender	Function	描画前に軸ラベルをカスタマイズするイベント
seriesRender	Function	系列の描画時に発生するイベント
legendClick	Function	凡例項目のクリック時に発生するイベント
legendRender	Function	凡例項目の描画時に発生するイベント
crosshairLabelRender	Function	クロスヘアのツールチップ描画前に発生するイベント
selectorRender	Function	範囲セレクターの描画時に発生するイベント
onZooming	Function	ズーム操作中に発生するイベント
load	Function	チャートの読み込み前に発生するライフサイクルイベント
loaded	Function	チャートの読み込み後に発生するライフサイクルイベント
beforeExport	Function	エクスポート処理の前に発生するイベント
stockEventRender	Function	株価イベントマーカーの描画をカスタマイズ
rows	Array	複数行レイアウトの行定義
isTransposed	boolean	チャートを転置して描画
trendlines	Array	トレンドラインの設定（StockChartTrendlinesDirective）

StockChartSeriesDirective

Prop	Type	Description
dataSource	Array	株価データの配列
type	string	系列の種類（Candle、Line、Spline、Hilo、HiloOpenClose）
xName	string	x 軸（日付）のデータフィールド
high	string	高値のデータフィールド
low	string	安値のデータフィールド
open	string	始値のデータフィールド
close	string	終値のデータフィールド
volume	string	出来高のデータフィールド
name	string	凡例に表示する系列名
yName	string	y 軸の値のデータフィールド
yAxisName	string	この系列をバインドする Y 軸の名前（複数軸の場合）
bearFillColor	string	下落トレンドのローソク足／バーの塗りつぶし色
bullFillColor	string	上昇トレンドのローソク足／バーの塗りつぶし色
fill	string	系列の色またはグラデーションの塗りつぶし（例：'url(#gradient1)'）
width	number	系列の線幅
opacity	number	系列の不透明度（0～1）
border	Object	系列の境界線の設定（width、color、dashArray）
marker	Object	データポイントのマーカー設定（visible、size、shape、fill、border）
animation	Object	アニメーション設定（enable、duration、delay）
legendShape	string	凡例アイコンの形状（Circle、Rectangle、Triangle、Diamond など）
tooltip	Object	系列固有のツールチップ設定
trendlines	Array	この系列のトレンドライン
cornerRadius	number	長方形の角の半径

一般的な使用例

1. 株式取引プラットフォーム - ローソク足チャートでリアルタイムまたは過去の株価を表示します
2. 金融分析ダッシュボード - テクニカル指標やイベントを含む複数チャートのレイアウトを表示します
3. ポートフォリオトラッカー - 投資パフォーマンスの推移を可視化します
4. 市場調査ツール - 異なる系列の種類を使って複数の銘柄を比較します
5. 取引アルゴリズムのバックテスト - 指標やトレンドラインを使って戦略の結果を可視化します
6. 経済データの可視化 - 時系列の金融データや経済データを表示します
7. 暗号資産チャート - OHLC データを使って暗号資産の価格変動を追跡します

モジュールの注入

Stock Chart の機能を使用するには、モジュールを明示的に注入する必要があります。

import { Inject, DateTime, DateTimeCategory, Logarithmic, 
         Tooltip, RangeTooltip, Crosshair, 
         LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, 
         HiloSeries, RangeAreaSeries, StockLegend, Trendlines, Export } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, 
         MomentumIndicator, SmaIndicator, AtrIndicator, 
         AccumulationDistributionIndicator, MacdIndicator, 
         StochasticIndicator } from '@syncfusion/ej2-react-charts';

<StockChartComponent>
  <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                     CandleSeries, StockLegend, Trendlines, Export,
                     EmaIndicator, SmaIndicator, BollingerBands]} />
</StockChartComponent>

一般的なモジュール：

軸：

• DateTime - DateTime 軸（株価チャートで必須）
• DateTimeCategory - 営業日のみを対象とする DateTime カテゴリー軸
• Logarithmic - 対数目盛の軸

UI 機能：

• Tooltip - データポイントにカーソルを合わせたときのツールチップ
• RangeTooltip - 範囲セレクターのツールチップ
• Crosshair - 軸のツールチップを備えた十字線
• StockLegend - 系列の凡例表示

系列の種類：

• LineSeries、SplineSeries - 折れ線チャート
• CandleSeries - 従来型のローソク足チャート
• HiloOpenCloseSeries - OHLC バー
• HiloSeries - 高値・安値バー
• RangeAreaSeries - 範囲エリアの可視化

テクニカル分析：

• Trendlines - トレンドラインの可視化（Linear、Exponential、Logarithmic、Polynomial、Power、Moving Average）
• EmaIndicator、SmaIndicator、TmaIndicator - 移動平均指標
• RsiIndicator、BollingerBands、MacdIndicator - 高度な指標
• StochasticIndicator、MomentumIndicator、AtrIndicator - モメンタム指標
• AccumulationDistributionIndicator - 出来高ベースの指標

エクスポート：

• Export - PNG、JPEG、SVG、PDF へのエクスポート

イベント処理

Stock Chart では、ユーザー操作の追跡やカスタム動作の構築に役立つ、包括的なイベントを利用できます。

データポイントのイベント

// Point click event
const handlePointClick = (args) => {
  console.log('Point clicked:', args.pointIndex, args.seriesIndex);
  console.log('X:', args.x, 'Y:', args.y);
};

// Point move event (hover)
const handlePointMove = (args) => {
  console.log('Hovering over point:', args.x);
};

<StockChartComponent
  pointClick={handlePointClick}
  pointMove={handlePointMove}
>
  {/* ... */}
</StockChartComponent>

マウスイベント

// Various mouse tracking events
const handleMouseMove = (args) => {
  console.log('Mouse position:', args.x, args.y);
};

const handleMouseLeave = (args) => {
  console.log('Mouse left chart area');
};

const handleMouseClick = (args) => {
  console.log('Chart clicked');
};

<StockChartComponent
  stockChartMouseMove={handleMouseMove}
  stockChartMouseLeave={handleMouseLeave}
  stockChartMouseClick={handleMouseClick}
  stockChartMouseDown={(args) => console.log('Mouse down')}
  stockChartMouseUp={(args) => console.log('Mouse up')}
>
  {/* ... */}
</StockChartComponent>

範囲とセレクターのイベント

// Range change event (period selector or range selector)
const handleRangeChange = (args) => {
  console.log('Range changed:', args.start, 'to', args.end);
  // Refresh data or update analysis
};

<StockChartComponent
  rangeChange={handleRangeChange}
>
  {/* ... */}
</StockChartComponent>

凡例のイベント

// Legend click event
const handleLegendClick = (args) => {
  console.log('Legend item clicked:', args.legendText);
};

// Legend render event (for customization)
const handleLegendRender = (args) => {
  if (args.legendText === 'AAPL') {
    args.fill = '#ff0000'; // Customize legend color
  }
};

<StockChartComponent
  legendClick={handleLegendClick}
  legendRender={handleLegendRender}
>
  {/* ... */}
</StockChartComponent>

ツールチップのイベント

// Customize tooltip before rendering
const handleTooltipRender = (args) => {
  args.text = `<b>Stock Price: ${args.text}</b>`;
};

<StockChartComponent
  tooltip={{ enable: true }}
  tooltipRender={handleTooltipRender}
>
  {/* ... */}
</StockChartComponent>

株価イベントのレンダリング

// Customize stock event markers
const handleStockEventRender = (args) => {
  // Customize event styling, position, etc.
  if (args.text === 'Earnings') {
    args.background = '#ff0000'; // Custom color for earnings
  }
};

<StockChartComponent
  stockEvents={stockEvents}
  stockEventRender={handleStockEventRender}
>
  {/* ... */}
</StockChartComponent>

ライフサイクルイベント

// Load event (before rendering)
const handleLoad = (args) => {
  console.log('Chart loading');
};

// Loaded event (after rendering)
const handleLoaded = (args) => {
  console.log('Chart loaded');
};

<StockChartComponent
  load={handleLoad}
  loaded={handleLoaded}
>
  {/* ... */}
</StockChartComponent>

API リファレンス

以下は、公式の Syncfusion StockChart API をもとにした簡潔な API リファレンスです。必要に応じて、これらの項目を references/* に追加、または拡充してください。

完全な API ドキュメント：

• 包括的な完全版 API リファレンス： references/complete-api-reference.md — すべての props、メソッド、イベント、ディレクティブ、モジュールを網羅した主要リファレンス
• 簡潔な API サマリー： references/api.md — よく使われる API のクイックリファレンス
• Syncfusion 公式ドキュメント： https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

主な Props（StockChartComponent）

公式 API へのリンクを含むすべての props：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel

データとシリーズ：

• dataSource (Array | DataManager) — シリーズのソースデータ（x, open, high, low, close, volume を含むオブジェクト）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource
• series / StockChartSeriesCollectionDirective — シリーズの定義とタイプ（Candle、Line、Spline、Hilo、HiloOpenClose）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

軸：

• primaryXAxis (Object) — X 軸の設定（通常は valueType: 'DateTime' | 'DateTimeCategory' | 'Numeric'）。crosshairTooltip、majorGridLines、majorTickLines をサポートします。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
• primaryYAxis (Object) — Y 軸の設定（通常は valueType: 'Double' または 'Logarithmic'）。labelFormat、rangePadding、minorGridLines、crosshairTooltip をサポートします。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
• axes (Array) — 複数シリーズのスケーリングに使用する追加の Y 軸（StockChartAxisDirective と併せて StockChartAxesDirective を使用します）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes

ナビゲーションとセレクター：

• periods (Array) — 期間セレクターのボタン（intervalType、interval、text を含むオブジェクト）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods
• enablePeriodSelector (boolean) — 期間セレクターの表示を切り替えます（デフォルト：true）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector
• enableSelector (boolean) — 範囲セレクター（つまみ）の表示を切り替えます（デフォルト：true）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector
• enableCustomRange (boolean) — カスタム範囲選択モードを有効にします。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange

分析とイベント：

• indicators (Array) — テクニカル指標の設定（SMA、EMA、RSI、MACD、Bollinger など）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
• stockEvents (Array) — 株価イベントのマーカー（date、text、description、type、background）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

操作と UI：

• tooltip (Object) — ツールチップの設定（enable、format、shared）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel
• crosshair (Object) — クロスヘアの設定（enable、lineType）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/crosshairSettingsModel
• legendSettings (Object) — 凡例の表示とテンプレート。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel 選択と外観：
• selectedDataIndexes (Array) — データポイントをプログラムで選択します。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes
• selectionMode (string) — 選択モード（None、Point、Series）。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode
• isMultiSelect (boolean) — 複数のデータポイントを選択できるようにします。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect

テーマとレイアウト：

• theme (string) — チャートのテーマ（Material、Bootstrap、Fabric、Tailwind、HighContrast など）。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme
• background (string) — チャートの背景色。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background
• border (Object) — チャートの境界線の設定。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModel
• chartArea (Object) — チャート領域のスタイル設定。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModel
• margin (Object) — チャートの余白の設定。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModel
• title (string) — チャートのタイトル。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title
• titleStyle (Object) — タイトルのフォントスタイル設定。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModel
• width, height (string) — 寸法。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width

エクスポートと永続化：

• exportType (Array) — ツールバーで使用できるエクスポート形式 ['PNG', 'JPEG', 'SVG', 'PDF']。空の配列 [] を設定すると、エクスポートが無効になります。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype
• enablePersistence (boolean) — ページの読み込み間でチャートの状態を保持します。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence

系列と分析：

• series / StockChartSeriesCollectionDirective — StockChartSeriesDirective 項目を含む系列コレクション。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• indicators / StockChartIndicatorsDirective — StockChartIndicatorDirective 項目を含むテクニカル指標のコレクション。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
• trendlines / StockChartTrendlinesDirective — StockChartTrendlineDirective 項目を含むトレンドラインのコレクション。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel

アクセシビリティとRTL：

• enableRtl (boolean) — 右から左への描画を有効にします。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl

ズームとパン：

• zoomSettings (Object) — ズームとパンの設定。API: https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModel

メソッド

公式 API リンクがあるすべてのメソッド：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#methods

• export(type: string, fileName: string) — チャートを PNG、JPEG、SVG、または PDF としてエクスポートします。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export
• print() — チャートをプリンターまたは PDF に印刷します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print
• destroy() — チャートインスタンスをクリーンアップして削除します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy
• getModuleName() — コンポーネントのモジュール名を返します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename
• renderPeriodSelector() — 期間セレクターをプログラムで描画します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector
• rangeChanged(start: Date | number, end: Date | number) — 表示範囲をプログラムで変更します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged

イベント

公式 API リンクがあるすべてのイベント：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#events

ライフサイクルイベント：

• load — チャートの読み込み前に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load
• loaded — チャートの読み込み後に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded

データと描画のイベント：

• axisLabelRender — 各軸ラベルを描画前にカスタマイズします。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender
• seriesRender — 系列の描画時に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender
• beforeExport — エクスポート処理の前に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport

ユーザー操作イベント：

• pointClick — データポイントのクリック時に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick
• pointMove — データポイント上でマウスを動かしたときに発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove
• legendClick — 凡例項目のクリック時に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick
• legendRender — 凡例項目の描画時に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender

ツールチップとクロスヘアのイベント：

• tooltipRender — 表示前にツールチップの内容を変更します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender

範囲とセレクターのイベント：

• rangeChange / onRangeChange — 選択範囲が変更されたときに発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange
• selectorRender — 範囲セレクターの描画時に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender

テクニカル分析イベント：

• stockEventRender — 株価イベントマーカーの描画をカスタマイズします。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender
• onZooming — ズーム操作中に発生します。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming

参考ファイルとセクションの候補

• references/api.md — 公式ドキュメントへのリンクを含む、API 全体の概要（props、メソッド、イベント）。
• references/configuration.md — prop ごとのドキュメント（軸、テーマ、サイズ設定）を移動または拡充します。
• references/interactive-features.md — tooltipRender、pointClick、axisLabelRender のイベントフックと使用例を追加します。
• references/technical-analysis.md — indicators と stockEvents の API サンプルを拡充します。

最小限の API の例（props + events）

<StockChartComponent
  id="stockchart"
  dataSource={data}
  primaryXAxis={{ valueType: 'DateTime' }}
  enablePeriodSelector={true}
  indicators={[{ type: 'Sma', period: 14 }]}
  stockEvents={[{ date: new Date(2023,0,1), text: 'Earnings' }]}
  tooltip={{ enable: true }}
  crosshair={{ enable: true }}
  load={(args) => console.log('loading', args)}
  loaded={(args) => console.log('loaded', args)}
  axisLabelRender={(args) => {/* modify labels */}}
  pointClick={(args) => {/* handle point click */}}
>
  <Inject services={[DateTime, CandleSeries, Tooltip, Crosshair]} />
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type="Candle" xName="x" open="open" high="high" low="low" close="close" />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>