syncfusion-javascript-chart

Syncfusion TypeScript と JavaScript でのチャートの実装

Syncfusion EJ2 Charts パッケージは、インタラクティブでデータ駆動型のアプリケーションやダッシュボードを構築するための、包括的な可視化コンポーネントを提供します。

必要な可視化に適したコンポーネントを使用してください。

• デカルト座標系、統計、金融、極座標、レーダーの各系列には、Chart を使用します。
• 円、ドーナツ、ファネル、ピラミッドの可視化には、AccumulationChart を使用します。
• 範囲選択、期間、インジケーター、株価チャート固有のコントロールが組み込まれた金融ダッシュボードには、StockChart を使用します。

このパッケージは、複数の系列、軸、テクニカルインジケーター、トレンドライン、アニメーション、エクスポート、印刷、アクセシビリティ、右から左への描画、リアルタイムデータの更新に対応しています。

プラットフォームのサポート

このスキルでは、TypeScript と JavaScript の実装を扱います。

TypeScript

TypeScript の実装では、次のものを使用します。

• npm によるパッケージのインストール。
• @syncfusion/ej2-charts からのモジュールベースのインポート。
• Chart.Inject(...) による機能の登録。
• 型付きデータモデル。
• 型付きイベント引数。
• webpack や Vite などのバンドラー。
• IDE およびコンパイラーの完全なサポート。

JavaScript

JavaScript の実装では、次のものを使用します。

• 統合 CDN スクリプトまたは個別の CDN スクリプト。
• 必要に応じてローカルの ES5 スクリプトファイル。
• グローバルな ej.charts 名前空間。
• ej.charts.Chart.Inject(...) による機能の登録。
• TypeScript のコンパイル手順は不要です。

構成モデルは、一般に TypeScript と JavaScript で同等です。ただし、パッケージの読み込み、インポート、モジュールの注入、グローバル名前空間へのアクセス、型注釈はプラットフォームによって異なります。

このスキルを使用するタイミング

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

• デカルトチャートの作成： 折れ線、スプライン、エリア、横棒、縦棒、散布図、バブル、範囲、ステップ、ヒストグラム、箱ひげ図、ウォーターフォール、パレート、または金融チャートを作成します。
• 積み上げ型チャートの作成： AccumulationChart を使って、円、ドーナツ、ファネル、またはピラミッドの可視化を作成します。
• 金融ダッシュボードの作成： ローソク足、Hilo、HiloOpenClose、インジケーター、トレンドライン、または StockChart を使用します。
• 複雑なデータの可視化： 複数の系列、積み上げ系列、グループ化データ、複数の軸、チャートペインを構成します。
• インタラクティブなダッシュボードの構築： チャートを動的データやリアルタイムデータと組み合わせます。
• 外観のカスタマイズ： パレット、塗りつぶし、グラデーション、タイポグラフィ、境界線、背景、テーマ、レスポンシブ動作を構成します。
• インタラクティブ機能の追加： ツールチップ、十字線、トラックボール形式の操作、凡例、強調表示、選択、ズーム、パンを有効にします。
• 高度な分析の実装： テクニカルインジケーター、トレンドライン、注釈、金融分析を追加します。
• チャートのエクスポートまたは印刷： 対応する画像、ドキュメント、データ形式にエクスポートし、描画済みのチャートを印刷します。
• パフォーマンスの最適化： 大規模なデータセットをフィルタリング、集計、制限、段階的に読み込み、適切な場合には Canvas 描画を使用します。
• アクセシビリティのサポート： 説明、キーボードナビゲーション、フォーカスのスタイル設定、スクリーンリーダーのサポート、アクセシブルな概要、データテーブル、RTL レイアウトを構成します。
• アプリケーションのトラブルシューティング： 描画、データバインディング、モジュール注入、ブラウザー互換性、パフォーマンスの問題を診断します。

コンポーネントの選択

可視化を実装する前に、コンポーネントを選択してください。

Chart を使用する

次のものには Chart を使用します。

• 折れ線とスプライン。
• エリアと積み上げエリア。
• 横棒と縦棒。
• 散布図とバブル。
• 範囲系列。
• ステップ系列。
• ヒストグラム。
• 箱ひげ図。
• ウォーターフォール。
• パレート。
• 極座標とレーダー。
• ローソク足、Hilo、HiloOpenClose。
• テクニカルインジケーター。
• トレンドライン。

AccumulationChart を使用する

次のものには AccumulationChart を使用します。

• 円。
• ドーナツ。
• ファネル。
• ピラミッド。

ドーナツチャートは、innerRadius がゼロ以外の円系列です。

次のようには構成しないでください。

type: 'Doughnut'

次のようにしてください。

type: 'Pie',
innerRadius: '50%'

StockChart を使用する

次のような機能を備えた、株式に特化したインターフェイスがアプリケーションで必要な場合は、StockChart を使用してください。

• 範囲選択機能を内蔵しています。
• 期間セレクター。
• 金融系列の切り替え。
• テクニカル指標。
• 株式専用ツールバー。
• 金融データのエクスポートおよび印刷コントロール。

ナビゲーションガイド

ユーザーのタスクに関連するリファレンスファイルのみを読んでください。

TypeScript と JavaScript 向け WebMCP

📄 参照先： TypeScript API リファレンス および JavaScript API リファレンス

• TypeScript の WebMCP サンプルでは、WebMcpChart を含む、利用可能なすべての Chart 機能モジュールをインポートして注入する必要があります。
• 初期の系列タイプに基づいて、TypeScript のインポートや注入を減らさないでください。
• グローバル EJ2 バンドルを使用するブラウザー JavaScript の WebMCP サンプルには、インポートと注入呼び出しを含めないでください。
• JavaScript サンプルでは、オールインワンのブラウザースクリプトを読み込んだ後に new ej.charts.Chart(...) を使用する必要があります。
• どちらの言語でも、安定した Chart ID、自動登録、検証済みの WebMCP ツール名を使用する必要があります。
• registerWebMcpTools() や手動登録ボタンを生成しないでください。

はじめに

次の内容については、references/getting-started.md を読んでください。

• パッケージのインストール。
• TypeScript と JavaScript のセットアップ。
• モジュールの注入。
• 基本的な Chart の作成。
• ローカルデータのバインド。
• テーマの選択。
• 初期トラブルシューティング。

Chart の種類と選択

次の内容については、references/chart-types.md を読んでください。

• 直交座標系 Chart の種類。
• 統計 Chart と特殊な Chart。
• 金融系列。
• Polar Chart と Radar Chart。
• Pie、Doughnut、Funnel、Pyramid コンポーネントの選択。
• 適切な可視化を選択するためのガイドライン。
• 各 Chart の種類に必要なモジュール。

系列の設定

次の内容については、references/series-configuration.md を読んでください。

• 系列のプロパティとマッピング。
• 複数の系列。
• データラベル。
• マーカー。
• 系列の境界線と塗りつぶし。
• 積み上げとグループ化。
• 積み上げグループ。
• 空のポイントの処理。
• 複数軸の系列。

軸のカスタマイズ

次の内容については、references/axes-customization.md を読んでください。

• 数値、Category、DateTime、DateTimeCategory、Logarithmic 軸。
• 軸ラベルと書式設定。
• 軸の範囲とスケーリング。
• 複数の軸。
• 複数のペイン。
• 軸の配置。
• グリッド線と目盛り線。
• ストリップライン。

機能とインタラクション

次の内容については、references/features-interaction.md を読んでください。

• ツールチップとインラインツールチップの書式設定。
• 共有ツールチップ。
• 十字線。
• トラックボール形式のインタラクション。
• 凡例とハイライト表示。
• ポイント、系列、クラスターの選択。
• ズームとパン。
• Chart の注釈。
• インタラクションイベント。

スタイルと外観

次の内容については、references/styling-appearance.md を読んでください。

• カスタムカラーパレット。
• データに基づくポイントカラーと条件付きポイントカラー。
• 線形グラデーションと放射状グラデーション。
• タイポグラフィ。
• 境界線と背景。
• Chart エリアのスタイル設定。
• レスポンシブレイアウト。
• 組み込みテーマ。
• テーマの動的な切り替え。

高度な機能

次の内容については、references/advanced-features.md を読んでください。

• テクニカル指標。
• SMA、EMA、MACD、RSI、ATR、Bollinger Bands、Stochastic 指標。
• トレンドラインと予測。
• アニメーション。
• 対応する画像、ドキュメント、データ形式へのエクスポート。
• 印刷。
• 動きを抑える設定への対応。

データの処理と更新

次の内容については、references/data-handling.md を読んでください。

• データの動的な置き換え。
• ポイントの追加、更新、削除。
• リアルタイム Chart。
• WebSocket による更新。
• API のポーリング。
• ドラッグ操作によるデータ編集。
• ローカルおよびリモートのデータソース。
• DataManager。
• CSV データ。
• 大規模データセットのフィルタリングと集約。
• リソースのクリーンアップ。

アクセシビリティと RTL 対応

次の内容については、references/accessibility-rtl.md を読んでください。

• WCAG と WAI-ARIA への対応。
• Chart レベルのアクセシビリティ設定。
• 系列とポイントのアクセシビリティ。
• キーボードナビゲーション。
• フォーカス境界線のカスタマイズ。
• スクリーンリーダー向けの要約。
• セマンティックなデータテーブル。
• ARIA ライブリージョンによる通知。
• 色とコントラストに関するガイドライン。
• 右から左へのレンダリング。
• 言語の動的な切り替え。

トラブルシューティングと最適化

references/troubleshooting.md では、以下について説明しています。

• チャートが空白になる、または表示されない。
• フィールドのマッピングが無効。
• モジュールのインジェクションが不足している。
• ツールチップと凡例の問題。
• メモリのクリーンアップ。
• TypeScript と CDN の問題。
• SVG と Canvas の描画。
• 大規模なデータセットの最適化。
• ブラウザーとの互換性。
• デバッグの戦略。

実装の基本ルール

すべての実装で、以下のルールに従ってください。

正しいコンポーネントを選択する

• 直交座標系、統計、極座標、レーダー、金融系の系列には Chart を使用します。
• 円、ドーナツ、ファネル、ピラミッドには AccumulationChart を使用します。
• 株式専用の組み込みコントロールが必要な場合は、StockChart を使用します。
• 異なる Chart コンポーネントに属する API を混在させないでください。

必要なモジュールをインジェクトする

設定で使用するすべての系列、軸、機能のモジュールをインポートしてインジェクトしてください。

import {
  Category,
  Chart,
  LineSeries,
  Tooltip
} from '@syncfusion/ej2-charts';

Chart.Inject(
  LineSeries,
  Category,
  Tooltip
);

一般的な例：

• 折れ線グラフには LineSeries。
• 縦棒グラフには ColumnSeries。
• 積み上げ縦棒グラフには StackingColumnSeries。
• カテゴリ軸には Category。
• DateTime 軸には DateTime。
• ツールチップには Tooltip。
• 凡例には Legend。
• 選択には Selection。
• ズームとパンには Zoom。
• 直交座標系チャートのデータラベルには DataLabel。
• トレンドラインには Trendlines。
• エクスポートには Export。
• 注釈には ChartAnnotation。

有効なフィールドマッピングを維持する

常に以下を設定してください。

dataSource
xName
yName

以下を確認してください。

• マッピングされたフィールドが存在する。
• Y 値が数値である。
• DateTime 値が有効な JavaScript の Date オブジェクトである。
• 範囲系列と金融系系列に、必要なフィールドマッピングがすべて含まれている。

正しいチャートレベルのプロパティを使用する

以下を使用してください。

legendSettings
palettes
selectionMode
zoomSettings
annotations
indicators
accessibility

以下は使用しないでください。

legend
palette
selection
annotation

直交座標系のデータラベルには正しい配置を使用する

通常の直交座標系 Chart では、以下を通じてデータラベルを設定してください。

marker: {
  dataLabel: {
    visible: true
  }
}

dataLabel を直交座標系の系列のルートに直接配置しないでください。

コンストラクターのターゲットまたは appendTo のいずれかを使用する

コンストラクターのターゲット：

const chart: Chart = new Chart(
  {
    series: []
  },
  '#chart'
);

appendTo パターン：

const chart: Chart = new Chart({
  series: []
});

chart.appendTo('#chart');

同じインスタンスを 2 回アタッチしないでください。

リソースをクリーンアップする

Chart を完全に削除する場合：

• インターバルとタイムアウトをクリアします。
• WebSocket 接続を閉じます。
• アプリケーションが所有するイベントリスナーを削除します。
• chart.destroy() を呼び出します。

クイックスタートの例

TypeScript

パッケージをインストールします。

npm install @syncfusion/ej2-charts

Chart のコンテナーを追加します。

<div id="chart"></div>

コンテナーに安定したサイズを設定します。

#chart {
  width: 100%;
  min-height: 420px;
}

Chart を作成します。

import {
  Chart,
  DateTime,
  LineSeries,
  Tooltip
} from '@syncfusion/ej2-charts';

Chart.Inject(
  LineSeries,
  DateTime,
  Tooltip
);

interface SalesData {
  date: Date;
  value: number;
}

const chart[To('#chart');
 attach the same instance twice.

 Up Resourcesvalue: 21
  },
  {
    date: new Date(2026, 0, 2),
    value: 24
  },
  {
    date: new Date(2026, 0, 3),
    value: 36
  },
  {
    date: new Date(2026, 0, 4),
    value: 38
  },
  {
    date: new Date(2026, 0, 5),
    value: 54
  }
];

const chart: Chart = new Chart({
  title: 'Sales Over Time',
  primaryXAxis: {
    valueType: 'DateTime',
    labelFormat: 'dd MMM',
    title: 'Date'
  },
  primaryYAxis: {
    title: 'Sales'
  },
  tooltip: {
    enable: true,
    format:
      '<b>${point.x:dd MMM yyyy}</b><br>' +
      'Sales: ${point.y:n2}'
  },
  series: [
    {
      dataSource: chartData,
      xName: 'date',
      yName: 'value',
      type: 'Line',
      name: 'Sales',
      marker: {
        visible: true
      }
    }
  ]
});

chart.appendTo('#chart');

モジュールの用途：

• LineSeries は折れ線系列を描画します。
• DateTime は DateTime X 軸をサポートします。
• Tooltip はポイントのツールチップを有効にします。

統合 CDN スクリプトを使った JavaScript

本番環境では、バージョンを固定した一貫性のある EJ2 を使用してください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Sales Chart</title>

  <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script>

  <style>
    #chart {
      width: 100%;
      min-height: 420px;
    }
  </style>
</head>

<body>
  <div id="chart"></div>

  <script>
    ej.charts.Chart.Inject(
      ej.charts.LineSeries,
      ej.charts.DateTime,
      ej.charts.Tooltip
    );

    var chartData = [
      {
        date: new Date(2026, 0, 1),
        value: 21
      },
      {
        date: new Date(2026, 0, 2),
        value: 24
      },
      {
        date: new Date(2026, 0, 3),
        value: 36
      },
      {
        date: new Date(2026, 0, 4),
        value: 38
      },
      {
        date: new Date(2026, 0, 5),
        value: 54
      }
    ];

    var chart = new ej.charts.Chart({
      title: 'Sales Over Time',
      primaryXAxis: {
        valueType: 'DateTime',
        labelFormat: 'dd MMM',
        title: 'Date'
      },
      primaryYAxis: {
        title: 'Sales'
      },
      tooltip: {
        enable: true,
        format:
          '<b>${point.x:dd MMM yyyy}</b><br>' +
          'Sales: ${point.y:n2}'
      },
      series: [
        {
          dataSource: chartData,
          xName: 'date',
          yName: 'value',
          type: 'Line',
          name: 'Sales',
          marker: {
            visible: true
          }
        }
      ]
    });

    chart.appendTo('#chart');
  </script>
</body>
</html>

個別の CDN スクリプトを使った JavaScript

個別のパッケージスクリプトが必要な場合は、依存関係の順序で読み込み、同じバージョンを使用してください。

<script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/dist/global/ej2-base.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-data/dist/global/ej2-data.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/dist/global/ej2-charts.min.js"></script>

統合 EJ2 スクリプトと個別のパッケージスクリプトを同時に読み込まないでください。

よくあるパターン

パターン 1：複数系列の縦棒グラフ

横並びで比較するには、通常の縦棒系列を使用します。

必要なモジュール：

import {
  Category,
  Chart,
  ColumnSeries,
  Legend,
  Tooltip
} from '@syncfusion/ej2-charts';

Chart.Inject(
  ColumnSeries,
  Category,
  Legend,
  Tooltip
);

設定：

series: [
  {
    dataSource: chartData,
    xName: 'month',
    yName: 'sales',
    type: 'Column',
    name: 'Sales'
  },
  {
    dataSource: chartData,
    xName: 'month',
    yName: 'revenue',
    type: 'Column',
    name: 'Revenue'
  }
],
legendSettings: {
  visible: true,
  position: 'Bottom'
},
tooltip: {
  enable: true,
  shared: true
}

パターン 2：凡例付きの積み上げ縦棒グラフ

必要なモジュール：

import {
  Category,
  Chart,
  Legend,
  StackingColumnSeries,
  Tooltip
} from '@syncfusion/ej2-charts';

Chart.Inject(
  StackingColumnSeries,
  Category,
  Legend,
  Tooltip
);

設定：

series: [
  {
    dataSource: chartData,
    xName: 'category',
    yName: 'value1',
    type: 'StackingColumn',
    name: 'Current'
  },
  {
    dataSource: chartData,
    xName: 'category',
    yName: 'value2',
    type: 'StackingColumn',
    name: 'Previous'
  }
],
legendSettings: {
  visible: true,
  position: 'Bottom'
},
tooltip: {
  enable: true,
  shared: true
}

各カテゴリの合計を 100 パーセントに正規化する場合は、StackingColumn100 を使用します。

パターン 3：リアルタイムデータの更新

頻繁に更新する場合は、データウィンドウに上限を設け、アニメーションを無効にしてください。

interface RealTimeData {
  timestamp: Date;
  value: number;
}

let realTimeData: RealTimeData[] = [];

const maximumVisiblePoints: number = 100;

const updateInterval: number =
  window.setInterval(() => {
    const nextPoint: RealTimeData = {
      timestamp: new Date(),
      value:
        Math.round(
          Math.random() * 10000
        ) / 100
    };

    realTimeData = [
      ...realTimeData,
      nextPoint
    ].slice(-maximumVisiblePoints);

    chart.series[0].dataSource =
      realTimeData;

    chart.refresh();
  }, 5000);

window.addEventListener(
  'beforeunload',
  (): void => {
    window.clearInterval(
      updateInterval
    );

    chart.destroy();
  }
);

refresh() を呼び出す前に、すべての変更を適用してください。

パターン 4：インタラクティブなポイント選択

Selection をインジェクトします。

import {
  Chart,
  ColumnSeries,
  Selection
} from '@syncfusion/ej2-charts';

Chart.Inject(
  ColumnSeries,
  Selection
);

チャートレベルのプロパティで選択を設定します。

const chart: Chart = new Chart({
  selectionMode: 'Point',
  isMultiSelect: false,
  selectionPattern:
    'DiagonalForward',
  selectionComplete: (args): void => {
    console.log(
      'Selected values:',
      args.selectedDataValues
    );
  },
  series: [
    {
      dataSource: chartData,
      xName: 'category',
      yName: 'value',
      type: 'Column'
    }
  ]
});

chart.appendTo('#chart');

選択イベントとして pointRender を使用しないでください。pointRender は、ポイントが描画される前にカスタマイズするためのものです。

パターン 5：円グラフとドーナツグラフ

AccumulationChart を使用します。

import {
  AccumulationChart,
  PieSeries
} from '@syncfusion/ej2-charts';

AccumulationChart.Inject(
  PieSeries
);

const pieChart:
  AccumulationChart =
  new AccumulationChart({
    series: [
      {
        dataSource: chartData,
        xName: 'category',
        yName: 'value',
        type: 'Pie'
      }
    ]
  });

pieChart.appendTo('#chart');

innerRadius を設定して、ドーナツグラフを作成します。

series: [
  {
    dataSource: chartData,
    xName: 'category',
    yName: 'value',
    type: 'Pie',
    innerRadius: '50%'
  }
]

パターン 6：テクニカルインジケーター

テクニカルインジケーターは、チャートレベルの indicators コレクションに含めます。

import {
  CandleSeries,
  Chart,
  DateTime,
  LineSeries,
  SmaIndicator
} from '@syncfusion/ej2-charts';

Chart.Inject(
  CandleSeries,
  LineSeries,
  DateTime,
  SmaIndicator
);

series: [
  {
    dataSource: stockData,
    xName: 'date',
    open: 'open',
    high: 'high',
    low: 'low',
    close: 'close',
    type: 'Candle',
    name: 'Price'
  }
],
indicators: [
  {
    dataSource: stockData,
    xName: 'date',
    close: 'close',
    type: 'Sma',
    period: 20,
    seriesName: 'Price',
    name: 'SMA 20'
  }
]

通常の series コレクションにインジケーターを追加しないでください。

主なプロパティ

チャートレベルのプロパティ

• primaryXAxis：プライマリ X 軸を設定します。
• primaryYAxis：プライマリ Y 軸を設定します。
• axes：追加の軸を定義します。
• rows：水平のチャートペインを定義します。
• columns：垂直のチャートペインを定義します。
• series：直交座標系および金融系の系列を定義します。
• indicators：テクニカル指標を定義します。
• annotations：カスタム HTML 注釈を定義します。
• tooltip：チャートのツールチップを設定します。
• legendSettings：凡例を設定します。
• crosshair：クロスヘア操作を設定します。
• zoomSettings：ズームとパンを設定します。
• selectionMode：ポイント、系列、またはクラスターの選択を設定します。
• selectedDataIndexes：初期選択を定義します。
• palettes：チャートの色のコレクションを定義します。
• theme：組み込みテーマを選択します。
• background：チャートの背景を設定します。
• chartArea：プロット領域を設定します。
• title：チャートのタイトルを定義します。
• subTitle：チャートのサブタイトルを定義します。
• height：チャートの高さを設定します。
• width：チャートの幅を設定します。
• enableCanvas：Canvas レンダリングを有効にします。
• enableRtl：右から左へのレンダリングを有効にします。
• accessibility：チャートレベルのアクセシビリティを設定します。

系列レベルのプロパティ

• dataSource：系列データを定義します。
• xName：X 値のフィールドを割り当てます。
• yName：数値の Y 値のフィールドを割り当てます。
• type：系列の種類を選択します。
• name：凡例とツールチップに表示する系列名を定義します。
• visible：系列の初期表示状態を制御します。
• fill：系列の色を設定します。
• width：対応する線の幅を設定します。
• opacity：系列の不透明度を設定します。
• border：系列の境界線を設定します。
• marker：ポイントマーカーを設定します。
• marker.dataLabel：直交座標系チャートのデータラベルを設定します。
• pointColorMapping：データソースからポイントの色を割り当てます。
• emptyPointSettings：欠損値を設定します。
• trendlines：対応する系列のトレンドラインを定義します。
• animation：系列のアニメーションを設定します。
• xAxisName：系列を名前付きの X 軸に関連付けます。
• yAxisName：系列を名前付きの Y 軸に関連付けます。
• stackingGroup：対応する積み上げ系列をグループ化します。
• accessibility：系列とポイントのアクセシビリティを設定します。

AccumulationChart のプロパティ

• series：Pie、Doughnut、Funnel、または Pyramid 系列を定義します。
• legendSettings：累積チャートの凡例を設定します。
• tooltip：累積チャートのツールチップを設定します。
• enableSmartLabels：ラベルの重なりを軽減します。
• accessibilityDescription：可視化について説明します。
• focusable：チャートのフォーカス可否を制御します。
• focusBorderColor：フォーカス時の境界線の色を設定します。
• focusBorderWidth：フォーカス時の境界線の幅を設定します。
• focusBorderMargin：フォーカス時の境界線の間隔を設定します。

WebMCP 言語ルール

TypeScript

import { Chart, WebMcpChart } from '@syncfusion/ej2-charts';

// The complete WebMCP sample must import and inject all available Chart feature modules.
Chart.Inject(WebMcpChart);

JavaScript

// No imports and no Chart.Inject(...) for global-bundle JavaScript WebMCP samples.
var chart = new ej.charts.Chart({ enableWebMcp: true });