Skip to content
chartjs2img

CLI レンダリング ​

render サブコマンドは Chart.js 設定 JSON を受け取って画像を書き出し ます。chartjs2img のメインの使い方で、1 件の入力 JSON から 1 枚の 画像を得る用途にぴったりです。CI、Makefile ターゲット、レポート生成 スクリプト、アドホックな単発呼び出しなどに向いています。

bash
chartjs2img render [options]

まだインストールしていない場合は クイックスタート を参照 してください。

このページの例はすべて実際の Chart.js 設定をレンダリングした ものです。タブを切り替えると、PNG・JSON 設定・コピーして使える CLI コマンドを行き来できます:

タブを切り替えて JSON / CLI を確認。
line-chart

利用パターン ​

標準入力から ​

デフォルトの動作。JSON を stdin に流し、画像は -o で書き出します。

bash
echo '{"type":"bar","data":{"labels":["A","B","C"],"datasets":[{"data":[1,2,3]}]}}' \
  | chartjs2img render -o chart.png

ファイルから ​

bash
chartjs2img render -i chart.json -o chart.png

標準出力へ ​

-o を省略（または -o -）すると、バイナリ画像が stdout に 書き出されます。identify、magick、あるいは HTTP POST への 直接パイプに便利です。

bash
chartjs2img render -i chart.json > chart.png

# ImageMagick で後処理にパイプ
chartjs2img render -i chart.json | magick - -resize 640x jpg:chart.jpg

JPEG 出力 ​

bash
chartjs2img render -i chart.json -o chart.jpg -f jpeg -q 85

サイズ・DPR・背景色の変更 ​

bash
chartjs2img render -i chart.json -o wide.png -w 1200 -h 400
chartjs2img render -i chart.json -o retina.png --device-pixel-ratio 3
chartjs2img render -i chart.json -o transparent.png --background-color transparent

レンダリングエンジンの選択 ​

既定は skia（ブラウザ不要でインプロセス描画）。実ブラウザとの ピクセル一致が必要なときだけ browser（ヘッドレス Chromium）を 指定します。詳細は レンダリングエンジン。

bash
chartjs2img render -i chart.json -o chart.png --engine skia      # 既定
chartjs2img render -i chart.json -o chart.png --engine browser

入力形式 ​

CLI の入力は Chart.js 設定そのもの（ラッパーなし）です。HTTP ボディ では chart フィールドで包む点と異なります。

json
{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [
      { "label": "Sales", "data": [12, 19, 3], "backgroundColor": "rgba(54,162,235,0.7)" }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Monthly Sales" }
    }
  }
}

JSON のみ — 関数値は静かに破棄されます

設定はレンダラへ渡る際に（どちらのエンジンでも）JSON.stringify を 通過します。関数値・シンボル・undefined はここで落ちるため、 formatter: (ctx) => ... のようなコールバック、tooltip コールバック、 scale tick コールバックは届きません。静的な値を使ってください。

各プラグインが追加する type やオプションは 同梱プラグイン を参照、または chartjs2img llm で LLM 向けリファレンス全文を出力できます。

フラグ ​

フラグ既定値説明
-i, --input <file>stdin入力 JSON ファイル、または - で stdin
-o, --output <file>stdout出力画像ファイル、または - で stdout
-w, --width <px>800キャンバス幅
-h, --height <px>600キャンバス高さ
--device-pixel-ratio <n>1出力スケール係数 — N で出力寸法と描画精度の両方を倍化
--background-color <color>whiteCSS カラー、または transparent
-f, --format <fmt>pngpng または jpeg
-q, --quality <0-100>90JPEG の品質
--engine <engine>skiaskia（既定・ブラウザ不要）または browser（ヘッドレス Chromium）
--font-family <name>ホスト既定チャートの既定フォントファミリ（ホストにインストール済みのフォント名）

その他のサブコマンド ​

chartjs2img examples ​

組み込みサンプル全てを指定ディレクトリへレンダリングします。新しい プラグインやエンジンの煙テストに便利です（35 個の組み込み例を skia エンジンで合計約 1.5 秒で描画）。

bash
chartjs2img examples -o ./out
chartjs2img examples -o ./out -f jpeg -q 80
chartjs2img examples -o ./out --engine browser   # browser エンジンで再現確認
フラグ既定値説明
--outdir, -o <dir>./examples出力ディレクトリ
-f, --format <fmt>pngpng / jpeg
-q, --quality <0-100>90JPEG 品質
--engine <engine>skiaskia（既定）または browser

chartjs2img llm ​

Chart.js とプラグインの全リファレンスを Markdown で出力。LLM の コンテキストウィンドウへ流し込む想定です。

bash
chartjs2img llm > reference.md
chartjs2img llm | pbcopy                              # macOS クリップボード
chartjs2img llm | llm -s "Generate a stacked bar..."  # LLM CLI へパイプ

chartjs2img help / --help ​

全サブコマンド・全フラグ・全環境変数を含むヘルプを表示します。

chartjs2img version / --version ​

バージョン番号を表示します。

終了コード ​

コード意味
0成功
1I/O 失敗、または browser エンジンの Chromium 起動失敗
2引数エラー（値取りフラグに値がない等）

Chart.js ランタイムのエラー（type の typo、データセット形状 ミスマッチなど）は非ゼロ終了しません。stderr に出力されます。 エラーフィードバック を参照。

パフォーマンス補足 ​

  • 既定の skia エンジンはブラウザを起動しないため、ワンショット CLI 呼び出しでも起動コストがほぼなく高速です（1 チャート数十 ms）。
  • browser エンジンは初回レンダリング時に Chromium を起動し、同一 プロセス内の後続レンダリングで再利用します。ワンショット呼び出し はこの起動コスト（約 300 ms）を毎回支払うため、大量描画では skia エンジンか、HTTP サーバー を立てて各チャートを POST する方が効率的です。

次はどこへ ​

  • 環境変数 — Chromium 検出、レンダリング タイムアウト、キャッシュ動作を CLI 向けに調整。
  • エラーフィードバック — Chart.js の警告・ エラーが stderr にどう出るか。
  • 同梱プラグイン — 追加セットアップなしで使える 12 個の Chart.js プラグイン。
このページを編集Last updated: