syncfusion-react-sparkline

Syncfusion React Sparkline の実装

Syncfusion React Sparkline コンポーネントを実装するための包括的なガイドです。軸や座標を使わず、限られたスペースでデータの傾向を視覚化する、軽量でコンパクトなチャートです。

このスキルを使う場面

次のような場合に、このスキルを使います。

• ダッシュボードやグリッドにコンパクトなデータの視覚化を作成する
• データとともに傾向を示すインジケーターをインラインで表示する
• 最小限のスペースしか使わないミニチャートを実装する
• テーブルセルや小さなコンテナーにデータパターンを表示する
• 5 種類の Sparkline（Line、Column、Area、Win-Loss、Pie）のいずれかを作成する
• Sparkline にツールチップ、マーカー、データラベルを追加する
• テーマや色を使って Sparkline の外観をカスタマイズする
• アクセシブルでレスポンシブな Sparkline の視覚化を実装する
• Sparkline をグリッドやその他のコンポーネントと統合する
• 範囲帯を使って特定のデータ範囲を強調表示する

コンポーネントの概要

Syncfusion React Sparkline は、データをシンプルでコンパクトな形式で表示する、非常に凝縮されたチャートコンポーネントです。主な機能は次のとおりです。

• 5 種類の Sparkline： Line、Column、Area、Win-Loss、Pie
• インタラクティブ機能： カスタマイズやテンプレートに対応したツールチップ、トラックライン
• 視覚的なマーカー： 始点、終点、最大値、最小値、負の値のポイントを強調表示
• データラベル： 書式設定を適用して、特定のポイントに値を表示
• 範囲帯： y 軸に沿った特定の値の範囲を強調表示
• 軸のカスタマイズ： Numeric、Category、DateTime の値の種類に対応
• テーマ： Material、Fabric、Bootstrap、Highcontrast の各テーマ
• アクセシビリティ： WAI-ARIA に対応し、WCAG 2.2 および Section 508 に準拠
• グリッドとの統合： グリッドセル内でシームレスに動作するよう設計
• ローカライズ： 国際化に対応

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

はじめに

📄 参照： references/getting-started.md

• 依存関係とパッケージのインストール（@syncfusion/ej2-react-charts）
• Vite を使った React アプリケーションの作成
• プロジェクトへの SparklineComponent の追加
• ツールチップ機能のモジュール注入
• dataSource プロパティを使ったデータソースのバインド
• Sparkline の種類（Line、Column、Area、Win-Loss、Pie）の変更
• 基本的なツールチップの設定
• 最初に動作するサンプル

Sparkline の種類

📄 参照： references/sparkline-types.md

• 5 種類すべての Sparkline の概要
• Line タイプ：連続的な傾向の視覚化
• Column タイプ：個別の値の比較
• Area タイプ：塗りつぶしによる傾向の視覚化
• Win-Loss タイプ：二値の結果の表現
• Pie タイプ：比例するデータの表示
• データとユースケースに応じた種類の選択ガイド
• 各種類の完全なサンプル

外観のカスタマイズ

📄 参照： references/appearance-customization.md

• containerArea を使った Sparkline の境界線の設定
• パディングのカスタマイズ（左、右、上、下）
• コンテナーの背景色
• テーマの選択（Material、Fabric、Bootstrap、Highcontrast）
• 色とスタイル設定のベストプラクティス
• ビジュアルデザインのガイドライン

データラベル

📄 参照： references/data-labels.md

• 特定のポイントのデータラベルを有効にする
• 表示オプション：All、Start、End、High、Low、Negative
• 塗りつぶし色、境界線、不透明度、テキストスタイルのカスタマイズ
• format プロパティを使ったデータラベルテキストの書式設定
• x 値と y 値を同時に表示する
• データラベルの配置と読みやすさ

マーカー

📄 参照： references/markers.md

• Sparkline のポイントへのマーカーの追加
• マーカーの表示オプション：All、Start、End、High、Low、Negative
• 特殊なポイントのマーカー設定
• マーカーの塗りつぶし、境界線、サイズ、不透明度のカスタマイズ
• マーカーとほかの機能の組み合わせ
• マーカーを使用する際のベストプラクティス

ユーザーインタラクション

📄 参照： references/user-interaction.md

• ツールチップの設定と SparklineTooltip の挿入
• ツールチップのカスタマイズ（塗りつぶし、テキストスタイル、書式、枠線）
• HTML を使ったカスタムツールチップテンプレートの作成
• マウスの動きを追跡するトラックライン機能
• トラックラインの色とスタイル設定
• インタラクティブ機能のベストプラクティス

高度な機能

📄 参照： references/advanced-features.md

• valueType（Numeric、Category、DateTime）を使った軸のカスタマイズ
• 最小値／最大値の設定（minX、maxX、minY、maxY）
• 軸線のカスタマイズ（色、幅、不透明度、dashArray）
• 値の範囲を強調表示するレンジバンド
• 複数のレンジバンドの設定
• 特別なポイントのカスタマイズ（開始、終了、正、負、低）
• Win-Loss スパークラインのタイポイントの色
• スパークラインの寸法（コンテナー、ピクセル、パーセンテージによるサイズ指定）
• ローカライズとカルチャーのサポート

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2 および Section 508 への準拠
• WAI-ARIA 属性（img ロール、aria-label、aria-hidden）
• キーボード操作（印刷するには Ctrl + P）
• スクリーンリーダーのサポート
• 右から左（RTL）へのサポート
• 色のコントラストに関するガイドライン
• モバイルデバイスのサポート
• アクセシビリティテストツール

API リファレンス

📄 参照： references/api-reference.md

• SparklineComponent の完全な API リファレンス：プロパティ、イベント、メソッド、子ディレクティブ、使用例（公式の Syncfusion React Sparkline API に基づきます）。

クイックスタート

インストール

npm install @syncfusion/ej2-react-charts --save

基本的なスパークライン

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
    />
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

ツールチップ付きスパークライン

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

よく使われるパターン

マーカー付きの列スパークライン

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function ColumnSparkline() {
  const data = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['High', 'Low'] }}
      highPointColor="green"
      lowPointColor="red"
    />
  );
}

export default ColumnSparkline;
ReactDOM.render(<ColumnSparkline />, document.getElementById('charts'));

Win-Loss スパークライン

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function WinLossSparkline() {
  const data = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="WinLoss"
      height="150px"
      width="300px"
      tiePointColor="blue"
    />
  );
}

export default WinLossSparkline;
ReactDOM.render(<WinLossSparkline />, document.getElementById('charts'));

データラベル付きスパークライン

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithLabels() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End'],
        border: { color: 'blue', width: 1 },
        fill: 'blue',
        opacity: 0.4,
        textStyle: { color: 'white' }
      }}
    />
  );
}

export default SparklineWithLabels;
ReactDOM.render(<SparklineWithLabels />, document.getElementById('charts'));

レンジバンド付きスパークライン

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithRangeBand() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      rangeBandSettings={[
        { startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
      ]}
    />
  );
}

export default SparklineWithRangeBand;
ReactDOM.render(<SparklineWithRangeBand />, document.getElementById('charts'));

主要なプロパティのリファレンス

プロパティ	型	説明
dataSource	object[]	スパークラインのデータ
type	string	スパークラインの種類：「Line」、「Column」、「Area」、「WinLoss」、「Pie」
xName	string	dataSource の x 軸に対応するプロパティ名
yName	string	dataSource の y 軸に対応するプロパティ名
height	string	スパークラインの高さ
width	string	スパークラインの幅
fill	string	スパークラインの色
valueType	string	軸の値の種類：「Numeric」、「Category」、「DateTime」
markerSettings	object	マーカーの設定
dataLabelSettings	object	データラベルの設定
tooltipSettings	object	ツールチップの設定
axisSettings	object	軸の最小値／最大値と線のカスタマイズ
rangeBandSettings	object[]	レンジバンドの設定
theme	string	テーマ：「Material」、「Fabric」、「Bootstrap」、「Highcontrast」
padding	object	スパークラインの周囲のパディング（左、右、上、下）
containerArea	object	スパークライン領域の枠線と背景

よくある使用例

1. ダッシュボードのトレンド指標： KPI のトレンドを指標と並べて表示
2. グリッドとの統合： テーブルセルにミニチャートを表示
3. 財務データ： 株式市場の利益／損失を示す Win-Loss スパークライン
4. パフォーマンス監視： サーバーメトリクスや応答時間をすばやく可視化
5. 比較ビュー： データ比較のために複数のスパークラインを横並びで表示
6. モバイルダッシュボード： 小さな画面向けのコンパクトな可視化
7. メールレポート： すばやく描画される軽量なチャート
8. リアルタイム監視： シンプルで高速に更新される可視化

次のステップ

1. まずは入門ガイドから始めましょう: インストールと基本的なセットアップについては、references/getting-started.md をお読みください
2. 種類を選びましょう: 適切なスパークラインの種類を選ぶには、references/sparkline-types.md をお読みください
3. 外観をカスタマイズしましょう: スタイル設定については、references/appearance-customization.md をお読みください
4. インタラクティブ機能を追加しましょう: ツールチップとトラックラインについては、references/user-interaction.md をお読みください
5. 高度な設定: 軸、範囲帯などについては、references/advanced-features.md をお読みください