ローソク足チャートライブラリ比較

3つのライブラリで同じデータを表示し、実装方法とスタイルを比較。

このページでは、Apache ECharts・Plotly.js・ApexChartsを使ったローソク足チャート（Candlestick Chart）の実装パターンをインタラクティブなデモとコードで確認できます。

echartsv6.0.0 echarts-for-reactv3.0.6 plotly.js-dist-minv3.5.0 react-plotly.jsv2.6.0 apexchartsv5.10.6 react-apexchartsv2.1.0

📊 使用しているサンプルデータ

株価を想定した10営業日分のOHLC（始値・高値・安値・終値）データを使用しています。

1. Apache ECharts (echarts-for-react)

Baiduが開発した高機能チャートライブラリ。type: 'candlestick' でローソク足をネイティブサポート。

✓ ネイティブ対応✓ ズーム・クロスヘア✓ 多機能ダッシュボード

チャートを読み込み中...

特徴: JSONベースのオプション設定で直感的に記述できる。データの順序は [open, close, low, high] と一般的なOHLC順と異なる点に注意。dataZoom を追加すれば広範囲データのスクロールも容易。SSRには非対応のためdynamic importが必要。

tsx

'use client';
import dynamic from 'next/dynamic';
const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });

const raw = [
  { date: '2024-01-04', open: 100, high: 108, low: 97,  close: 105 },
  { date: '2024-01-05', open: 105, high: 110, low: 102, close: 103 },
  { date: '2024-01-08', open: 103, high: 112, low: 100, close: 110 },
  { date: '2024-01-09', open: 110, high: 115, low: 107, close: 108 },
  { date: '2024-01-10', open: 108, high: 113, low: 105, close: 112 },
  { date: '2024-01-11', open: 112, high: 118, low: 109, close: 115 },
  { date: '2024-01-12', open: 115, high: 117, low: 108, close: 109 },
  { date: '2024-01-15', open: 109, high: 114, low: 106, close: 113 },
  { date: '2024-01-16', open: 113, high: 120, low: 111, close: 118 },
  { date: '2024-01-17', open: 118, high: 122, low: 114, close: 116 },
];

export function EChartsCandlestick() {
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: raw.map(d => d.date),
      axisLabel: { rotate: 30 },
    },
    yAxis: {
      type: 'value',
      scale: true,
    },
    series: [{
      type: 'candlestick',
      // EChartsのデータ順: [open, close, low, high]
      data: raw.map(d => [d.open, d.close, d.low, d.high]),
      itemStyle: {
        color: '#ef4444',
        color0: '#22c55e',
        borderColor: '#ef4444',
        borderColor0: '#22c55e',
      },
    }],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Apache EChartsを使ったローソク足チャートを実装してください。
- 使用ライブラリ: echarts-for-react の ReactECharts
- type: 'candlestick' を使用
- データ順は [open, close, low, high]（ECharts独自の順序）
- 陽線（上昇）: 赤、陰線（下落）: 緑
- ホバー時にOHLC値をツールチップで表示
- サンプルデータ: 10営業日分のOHLCデータ

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

2. Plotly.js (react-plotly.js)

金融チャートらしいUIが標準で付属。レンジスライダーやrangeselectorボタンなど、金融・データ分析向けの機能が豊富。

✓ レンジスライダー標準✓ ズーム・パン✓ 金融・データ分析系

チャートを読み込み中...

特徴: x・open・high・low・close を個別の配列で渡すスタイル。rangeslider が標準で使えるため金融系UIに最適。バンドルサイズが大きいため plotly.js-dist-min の使用を推奨。SSRには非対応のためdynamic importが必要。

tsx

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

const raw = [
  { date: '2024-01-04', open: 100, high: 108, low: 97,  close: 105 },
  { date: '2024-01-05', open: 105, high: 110, low: 102, close: 103 },
  { date: '2024-01-08', open: 103, high: 112, low: 100, close: 110 },
  { date: '2024-01-09', open: 110, high: 115, low: 107, close: 108 },
  { date: '2024-01-10', open: 108, high: 113, low: 105, close: 112 },
  { date: '2024-01-11', open: 112, high: 118, low: 109, close: 115 },
  { date: '2024-01-12', open: 115, high: 117, low: 108, close: 109 },
  { date: '2024-01-15', open: 109, high: 114, low: 106, close: 113 },
  { date: '2024-01-16', open: 113, high: 120, low: 111, close: 118 },
  { date: '2024-01-17', open: 118, high: 122, low: 114, close: 116 },
];

export function PlotlyCandlestick() {
  return (
    <Plot
      data={[{
        type: 'candlestick',
        x: raw.map(d => d.date),
        open:  raw.map(d => d.open),
        high:  raw.map(d => d.high),
        low:   raw.map(d => d.low),
        close: raw.map(d => d.close),
        increasing: { line: { color: '#ef4444' } },
        decreasing: { line: { color: '#22c55e' } },
      }]}
      layout={{
        xaxis: { rangeslider: { visible: true } },
        yaxis: { title: { text: '価格' } },
        margin: { l: 50, r: 20, t: 20, b: 40 },
        height: 300,
        paper_bgcolor: 'transparent',
        plot_bgcolor: 'transparent',
      }}
      config={{ displayModeBar: false }}
      style={{ width: '100%' }}
    />
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Plotly.jsを使ったローソク足チャートを実装してください。
- 使用ライブラリ: react-plotly.js（next/dynamicでSSR無効化）
- type: 'candlestick' を使用
- x・open・high・low・close を個別の配列で渡す
- xaxis.rangeslider を表示
- 陽線: 赤、陰線: 緑
- サンプルデータ: 10営業日分のOHLCデータ

3. ApexCharts (react-apexcharts)

JSONベースの設定で最短で動くものを作れる。ズーム・ツールバーが標準装備でビジネスダッシュボードに最適。

✓ 設定がシンプル✓ ズーム・ツールバー✓ ダッシュボード向け

チャートを読み込み中...

特徴: { x: Date, y: [open, high, low, close] } の形式でデータを渡すOHLC順。xaxis.type: 'datetime' で日時軸を自動フォーマット。ツールバーやアノテーションも手軽に追加できる。SSRには非対応のためdynamic importが必要。

tsx

'use client';
import dynamic from 'next/dynamic';
const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });

const raw = [
  { date: '2024-01-04', open: 100, high: 108, low: 97,  close: 105 },
  { date: '2024-01-05', open: 105, high: 110, low: 102, close: 103 },
  { date: '2024-01-08', open: 103, high: 112, low: 100, close: 110 },
  { date: '2024-01-09', open: 110, high: 115, low: 107, close: 108 },
  { date: '2024-01-10', open: 108, high: 113, low: 105, close: 112 },
  { date: '2024-01-11', open: 112, high: 118, low: 109, close: 115 },
  { date: '2024-01-12', open: 115, high: 117, low: 108, close: 109 },
  { date: '2024-01-15', open: 109, high: 114, low: 106, close: 113 },
  { date: '2024-01-16', open: 113, high: 120, low: 111, close: 118 },
  { date: '2024-01-17', open: 118, high: 122, low: 114, close: 116 },
];

const series = [{
  data: raw.map(d => ({
    x: new Date(d.date),
    // ApexChartsのデータ順: [open, high, low, close]（OHLC順）
    y: [d.open, d.high, d.low, d.close],
  })),
}];

const options = {
  chart: { type: 'candlestick' as const },
  xaxis: { type: 'datetime' as const },
  yaxis: { tooltip: { enabled: true } },
  plotOptions: {
    candlestick: {
      colors: {
        upward: '#ef4444',
        downward: '#22c55e',
      },
    },
  },
};

export function ApexCandlestick() {
  return (
    <ApexChart
      type="candlestick"
      series={series}
      options={options}
      height={300}
      width="100%"
    />
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、ApexChartsを使ったローソク足チャートを実装してください。
- 使用ライブラリ: react-apexcharts（next/dynamicでSSR無効化）
- type: 'candlestick' を使用
- データ形式: { x: Date, y: [open, high, low, close] }（OHLC順）
- xaxis.type: 'datetime'
- 陽線: 赤、陰線: 緑
- サンプルデータ: 10営業日分のOHLCデータ

ライブラリ比較

ライブラリ	レンダリング	ローソク足対応	インタラクション	おすすめ用途
Apache ECharts	Canvas/SVG	ネイティブ（candlestick）	ズーム・クロスヘア	多機能ダッシュボード
Plotly.js	SVG	ネイティブ（candlestick）	ズーム・レンジスライダー	データ分析・金融系
ApexCharts	SVG	ネイティブ（candlestick）	ズーム・ツールバー	ビジネスダッシュボード

選択のポイント

•Apache ECharts: 高度なカスタマイズと出来高バーなどの組み合わせが必要な場合。dataZoom で広範囲データを扱いやすい。
•Plotly.js: レンジスライダーやrangeselectorボタンなど金融チャートらしいUIが標準で付属。データ分析・科学系プロジェクトに最適。
•ApexCharts: 設定がシンプルで最短で動くものを作りたい場合。ツールバーやアノテーションも手軽に追加できる。

ローソク足チャート（Candlestick Chart）は、株価などのOHLC（始値・高値・安値・終値）データを視覚化するグラフ。ローソクの色で上昇・下落を直感的に示し、金融・トレード系ダッシュボードで広く使われる。

株価・為替・仮想通貨の価格推移分析、金融ダッシュボード、トレードツール。OHLC4値を一度に表現できるため価格変動の可視化に最適。

主なバリエーション