Highchartsとは？13系の導入コードと商用ライセンスの線引き・ECharts等OSSとの選び分け

Highchartsは、ノルウェーのHighsoftが開発するJavaScriptのグラフライブラリです。ソースはGitHubで公開されていますが、オープンソースではありません。無料で使えるのは個人と教育の利用だけで、会社の業務で使うなら社内ツールや試作でも有償のライセンスが要ります。この記事では、2026年10月30日にnpm registryで確認した最新版13.1.1の版構成と配信サイズ、ライセンスの種類と受託開発での買い方、モジュールの読み込み方と大量データ向けのBoost、13系で変わった既定の動作を順に扱う構成です。後半では、EChartsやChart.jsなど無償のライブラリとBIツールに対して、Highchartsを買ってよい条件を言い切ります。

まとめ：Highchartsを買って使う案件と無償のOSSで済ませる案件の境目

Highchartsを選んでよいのは、公開サイトでキーボード操作や読み上げに対応したグラフを出す案件、株価チャートやガントチャートを同じ書き方でそろえたい案件、ベンダーの保守窓口を契約に入れたい案件です。アクセシビリティの部品が公式に用意され、Stock・Maps・Ganttの追加製品も同じoptionの書き方で扱えます。

社内ダッシュボードに折れ線と棒を数枚置くだけなら、費用を払う理由はありません。Apache-2.0のEChartsか、MITのChart.jsで足ります。費用は開発者の人数で決まり、ショップの初期表示では1席あたり366米ドルです。受託開発で使う場合は発注者がライセンスの名義人になるので、見積もりの段階で発注者に購入してもらう前提を伝えてください。

Highchartsの定義と13.1系の版構成・配信サイズ・OSSではない配布形態

Highchartsは、グラフの中身を1つの設定オブジェクト（options）で書き、Highcharts.chart()に渡して描くライブラリです。描画はSVGで行い、点が多いときだけ後述のBoostモジュールでWebGLに切り替えます。

GitHubでソースを読めてもオープンソースにはならない配布条件

GitHubのリポジトリではソースもIssueも公開されています。それでも、npmのパッケージ情報のlicense欄はSPDXの識別子ではなく、Highsoftのライセンスページを指すURLです。MITやApache-2.0のような「誰でも商用に使える」許諾ではありません。

見落としやすいのは、npmで誰でも登録なしに入れられ、ライセンスキーの入力もない点です。購入しなくても動くため、契約の確認が抜けたまま本番に出てしまう事故が起きやすい構造です。

npm実測で見る13.1.1の公開日と12系・11系を並行保守する版の構成

npm registryの記録では、11.0.0が2023年4月26日、12.0.0が2024年11月27日、13.0.0が2026年6月11日、最新の13.1.1が2026年9月20日に公開されています。実行時の依存パッケージは0個です。

旧系統も保守が続いています。npmの配布タグhighcharts-v12は12.6.2（2026年9月21日）、highcharts-v11は11.4.9（2026年9月25日）を指していました。13系へすぐ上げられない既存案件は、npm install highcharts@highcharts-v12で12系の修正版を受け取れます。

本体102,413バイトと追加モジュールのgzip後サイズの実測値

2026年10月30日にjsDelivrから13.1.1の配布ファイルを取得し、gzipの圧縮レベル9で固めたサイズを測りました。

本体にアクセシビリティと書き出しを足すと、gzip後で153,370バイトです。兄弟記事のEChartsの部分インポートと大量データの描画設定で測った全部入りのEChartsは369,392バイトでした。Highchartsは機能をモジュールに分けて配っているぶん、必要な分だけ読み込めば軽く収まります。

無料で使える範囲と有償になる範囲：新EULAと標準ライセンスの読み方

日本語の解説記事には「非営利組織や個人サイトは無料」と書かれたものが残っています。2026年10月時点の規約では、この理解は成り立ちません。

個人と教育だけが無料で社内PoCや非営利団体も有償になる線引き

無償利用を定めるEULA 1.0は、商用利用を「営利企業、非営利団体、政府機関の中での利用」まで含めて定義しています。個人利用の対象は、自然人が楽しみや独学のために完全に非商用で使う場合だけです。小規模事業やスタートアップの業務での利用は、個人利用の禁止例として明記されています。

Highsoftによる新EULAの解説は、試作、研究開発、社内ツールといった社内業務での利用にも商用ライセンスが必要だと書いています。教育の無償枠も、教育ライセンスのページのとおり学校の正規の授業や課題に関わる活動に限られます。「社内の検証だから無料」という判断は通りません。

Internal・SaaS・OEMの3種と開発者シート数で決まる購入単位

有償のライセンスは、Highchartsを載せるアプリケーションの公開範囲で3種類に分かれます。公式ショップのFAQと標準ライセンス契約から要点を並べます。

公開サイトに1枚でもグラフを出すなら、InternalではなくSaaSが必要です。外部向けのアプリが2つ以上あるときは、営業に連絡して範囲を広げます。開発者シートは、APIやソースを扱う人を同時に数えた人数です。ショップの初期表示はCore 1席366米ドルで、Stockは＋366米ドル、Mapsは＋128米ドル、Ganttは＋73米ドルが加算されます（2026年10月30日確認）。

受託開発で発注者がライセンス名義人になる条件と見積もりへの載せ方

ショップのFAQは、受託の開発者について「発注者のライセンスでカバーされる」と答えています。案件の成果物は発注者の環境で動き、発注者の管理下で配信されるので、名義人は発注者でなければなりません。開発会社が自社名義で買ったライセンスを納品物に付けて渡す形は想定されていない、ということです。

実務では、要件定義の段階でグラフライブラリを決め、Highchartsを選ぶならライセンス費を発注者の購入品として見積もりに別記します。開発者の人数は、発注者側と開発会社側で同時にコードを触る人の合計で数えます。顧客のサーバーへインストールして配るパッケージ製品はOEMの扱いで、ショップでは買えません。

永続ライセンスと年額の違いとAdvantage終了後に使える版の範囲

買い方は永続と年額の2つです。ショップのFAQによると、年額は購読をやめた時点ですべての版の利用をやめる必要があります。永続は初年度に保守のAdvantageが付き、解約した後も、解約時点までに出た版を使い続けられる契約です。6席以下の社内案件や外部向け1アプリなら年額が勧められています。

年額は止めるとグラフが使えなくなるので、運用が数年続く業務システムでは永続を選ぶほうが安全です。保守の窓口はAdvantageが初回応答36時間、上位のAdvantage Plusが17時間とショップに書かれています。

npmで入れてモジュールを読み込み最初の折れ線グラフを描くまでの手順

インストールは1行です。型定義は本体に同梱されています。

npm install highcharts@13

本体の後にexportingとaccessibilityを読み込む12系以降の書き方

公式のインストール手順では、本体を先に読み込み、続けてモジュールをimportします。11系までのようにHighchartsExporting(Highcharts)と関数を呼ぶ必要は、12系からなくなりました。

// salesChart.ts：月次の受注件数を折れ線で描き、画像の書き出しとキーボード操作を有効にする
import Highcharts from 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/accessibility';

export function mountSalesChart(el: HTMLElement): () => void {
  const chart = Highcharts.chart(el, {
    title: { text: '月次の受注件数' },
    accessibility: { description: '2026年4月から7月までの受注件数の推移です。' },
    xAxis: { categories: ['4月', '5月', '6月', '7月'] },
    yAxis: { title: { text: '件数' } },
    series: [{ type: 'line', name: '受注件数', data: [12, 19, 15, 23] }],
    exporting: { fallbackToExportServer: false },
  });
  // 画面を離れるときに呼び、SVGとイベントを片付ける
  return () => chart.destroy();
}

描画先には高さを持つ要素を渡します。exporting.fallbackToExportServerは第5章で扱う設定で、書き出しのデータを社外のサーバーへ送らないために入れています。CDNのcode.highcharts.comは評価と試作向けとされ、本番はnpmか自社配信が推奨です。

Reactの公式ラッパー2系統：新しい5系と従来の3系を選ぶ基準

Reactの公式ラッパーは2系統あります。新しい@highcharts/reactは、系列をJSXの部品として書く方式です。npmの記録では最新の5.4.0が2026年10月12日公開で、peer依存にHighcharts 13.0.0以上とReact 18以上を指定しています。

import { Chart } from '@highcharts/react';
import { LineSeries } from '@highcharts/react/series/Line';

export function OrdersPanel() {
  return (
    <Chart>
      <LineSeries data={[12, 19, 15, 23]} />
    </Chart>
  );
}

従来のhighcharts-react-officialは3.2.3（2025年10月1日）が最新で、Highcharts 6.0.0以上なら組み合わせられます。12系に留まる案件はこちらを選びます。ラッパーのライセンスにも違いがあり、highcharts-react-officialはMIT、@highcharts/reactはHighsoftの独自ライセンスです。Next.jsのApp Routerで使う場合は、DOMに触れる部品なのでクライアントコンポーネントに置きます。分け方はApp Routerのファイル規約とPages Routerとの違いで解説しています。

accessibilityモジュールを外したときに出る警告とWCAG対応の関係

公式のアクセシビリティモジュールの説明によると、モジュールを読み込まないとブラウザのコンソールに警告が出ます。読み込むと、グラフの文章による説明、キーボードでの点の移動、読み上げソフト向けの情報が加わります。gzip後で39,802バイト増えますが、公開サイトでは外さない前提で考えてください。

社内画面で読み上げ対応が要らない場合は、accessibility.enabledの説明どおりaccessibility: { enabled: false }で警告を止められます。官公庁や金融機関の公開サイトのように達成基準への適合を求められる案件では、WCAG 2.2の達成基準とAA適合の範囲と照らして、グラフごとの説明文をaccessibility.descriptionに書きます。

数万点の時系列でBoostモジュールを使うときの閾値と描けなくなる表現

HighchartsはSVGで点を1つずつ描くので、数万点を超えると操作が重くなります。対策がBoostモジュールです。

5,000点か50系列を超えるとWebGL描画に切り替わる仕組み

公式のBoostモジュールの説明によると、Boostはグラフ内のcanvasにWebGLで描きます。切り替えの条件は、系列の点数がseries.boostThresholdの既定値5,000を超えるか、系列数がboost.seriesThresholdの既定値50を超えることです。モジュールは他のモジュールより後に読み込むよう指示されています。

// sensorChart.ts：1秒ごとのセンサー値（[時刻ミリ秒, 値] の配列）をWebGLで描く
import Highcharts from 'highcharts';
import 'highcharts/modules/boost'; // 他のモジュールより後に読み込む

export function mountSensorChart(el: HTMLElement, points: [number, number][]) {
  return Highcharts.chart(el, {
    chart: { zooming: { type: 'x' } },
    title: { text: 'センサー値（1秒間隔）' },
    xAxis: { type: 'datetime' },
    plotOptions: { line: { lineWidth: 1 } },
    series: [{ type: 'line', name: '温度', data: points, boostThreshold: 5000 }],
  });
}

データは{ x, y }のオブジェクトではなく、数値か[x, y]の配列で渡します。Boostが有効な系列では、点ごとのオブジェクトを受け付けない処理が常に働くためです。50万点規模なら、型付き配列をdataTableに渡すとseries.dataより最大20%速いと公式は書いています。WebGLの対応状況の確かめ方はWebGLの仕組みと対応ブラウザの確認で解説しています。

棒が1px線になり破線と積み上げが消えるBoostの制約と回避策

Boostには代償があります。公式の説明では、棒グラフの長方形は幅1pxの線で描かれ、面グラフは線のない縦線の集まりになります。破線、円以外のマーカー、積み上げ、負の値の色は使えません。線の太さは系列ごとに変えられず、アニメーションも効きません。

Highcharts StockではdataGroupingが既定で有効で、そのままだとBoostが働かない点にも注意してください。点をまとめて描くのが目的なら、StockのdataGroupingに任せるほうが見た目を保てます。数十万点を棒や積み上げで見せる要件なら、Boostに頼らず集計をサーバー側で済ませる設計にします。

13系への更新と画像・PDF出力で確認したい既定動作の変更点

検索で見つかるサンプルの多くは11系以前の書き方です。13系では、同じoptionでも見た目が変わる変更が入っています。

13.0でゲージの半径とデータラベルの位置が変わる箇所の戻し方

13.0.0の変更履歴の更新時の注意は5点あります。ゲージと極座標グラフの既定のレイアウトが刷新され、ソリッドゲージのradiusとinnerRadiusは数値で書くとピクセルとして扱われるようになりました。割合で指定していた画面はradius: '50%'のように文字列へ書き換えます。

ほかに、dataSortingはmodules/data-sorting.jsの読み込みが必須になりました。データラベルの距離は新しいdataLabels.distanceで決まり、useHTMLの中身はspanではなくdivで囲まれます。spanを狙ったCSSを書いていた画面は、更新後に崩れていないかを確かめてください。

12.3から既定になったブラウザ内での書き出しと公開サーバーへの送信

公式の書き出し機能の説明によると、12.3から画像の書き出しはブラウザ内での処理が既定になりました。それより前の版は、グラフのデータをHighsoftの公開サーバーexport.highcharts.comへ送って画像にする方式でした。PDFはoffline-exporting.jsと外部ライブラリが要り、npmの13.1.1ではjspdfとsvg2pdf.jsが任意のpeer依存に入っています。

ブラウザ内の処理が失敗したときに公開サーバーへ切り替えるかどうかは、exporting.fallbackToExportServerで決まります。売上や個人に関わる数値を扱う業務画面ではfalseにし、失敗時の表示をexporting.errorで用意します。11系の古い案件を引き継いだときは、書き出しの通信先を最初に確認する項目にしてください。

ECharts・Chart.js・BIと比べたHighchartsの採用条件と見送り場面

選び分けは、ライセンス費用、描画方式、必要なグラフの種類、保守窓口の要否で決まります。2026年10月30日時点のnpmの版とあわせて整理します。

ライセンス費用・描画方式・グラフの幅を判断軸に並べた4択の比較表

EChartsとChart.jsのライセンス条項の違いはオープンソースライセンス主要9種の商用利用可否で確かめられます。Highchartsだけが「人数で費用が増える」側にあり、開発者が増える大型案件ほど差が開きます。

Highchartsを買ってよい案件とApache-2.0のEChartsで足りる案件

Highchartsで決めてよいのは、次のどれかが要件にある案件です。公開サイトのグラフにキーボード操作と読み上げの対応を求められている。株価の期間選択やガントチャートを、通常のグラフと同じ書き方でそろえたい。障害時にベンダーの技術支援を契約で受けたい。この3つは無償のライブラリでは自前で作り込むことになり、その工数がライセンス費を上回りやすい領域です。

反対に、社内の管理画面に標準的なグラフを並べるだけなら見送ります。軽さ優先ならChart.jsの導入コードと大量データの限界、数十万点や地図が要るならEChartsで足ります。顧客環境に配るパッケージ製品にグラフを載せる場合も、OEMの見積もりが前提になり費用が読みにくいので、最初はEChartsで検討してください。有償の部品を業務画面に入れる判断は、表計算風の編集部品を扱ったHandsontableの商用ライセンスで迷わない採用判断と同じ考え方で整理できます。

グラフを自作せずBIツールで済ませたほうが安くなる画面の見分け方

閲覧者が軸や集計の単位、期間を自分で組み替えたい画面は、Highchartsでも作り込みが増えます。切り口が1つ増えるたびにAPIと画面の改修が発生し、ライセンス費に開発費が積み上がる構造です。社内の分析用途ならOSSのBIでも始められ、費用と商用利用の範囲はMetabaseの料金と使い方で整理しています。

Highchartsで作るべきなのは、決まった指標を決まった形で、社外の利用者にも見せる画面です。両者の線引きは予実管理ダッシュボードの作り方とBI・個別開発の判断で具体例を交えて扱いました。BIツールで済ませるか、グラフライブラリで業務システムに組み込むかの判断から相談したい場合は、BIツール導入支援で要件の整理を受け付けています。

Highchartsの導入前に確認されるライセンス・料金・連携のよくある質問

導入の検討段階でよく出る質問を5つ取り上げます。

Highchartsは無料で使えますか？

個人の趣味や独学と、学校の正規の授業で使う場合だけ無料です。営利企業・非営利団体・政府機関の中での利用は、社内ツールや試作を含めてすべて商用ライセンスの対象になります。npmから登録なしで入れられ、ライセンスキーもありません。動くことと使ってよいことは分けて確認してください。

Highchartsの料金はいくらですか？

2026年10月30日に公式ショップで確認した初期表示は、Highcharts Coreが開発者1席あたり366米ドルでした。Stock・Maps・Ganttは席ごとに追加で加算されます。ショップで買えるのはInternalとSaaSの6席までで、7席以上やOEMは営業への見積もり依頼です。構成で金額が変わるので、最終額はショップの構成画面で確かめてください。

受託開発会社が案件でHighchartsを使うとき、ライセンスは誰が買いますか？

ライセンスを購入するのは発注者です。公式ショップのFAQは、受託の開発者は発注者のライセンスでカバーされ、所有者は発注者である必要があると答えています。見積もりではライセンス費を発注者の購入品として別記し、席数は双方で同時にコードを扱う人数の合計で数えます。

HighchartsのStockやMapsは本体と別に購入が必要ですか？

別製品として追加の購入が必要です。コードはhighcharts/highstockのような製品ごとのバンドルか、本体にhighcharts/modules/stockを足す形で読み込みます。npmのhighchartsパッケージに全製品のファイルが入っているので、インストールだけで使えてしまう点に注意してください。株価チャートの期間選択や地図を使う画面がある場合は、席数とあわせて追加製品の分も見積もりに載せます。

VueやAngularでもHighchartsは使えますか？

VueとAngularのどちらでも利用可能です。npmの記録では、Vue向けのhighcharts-vueは2.0.2（2026年8月21日）でVue 3.0.0以上、Angular向けのhighcharts-angularは5.4.1（2026年7月8日）でAngular 19以上とHighcharts 12.2.0以上をpeer依存に指定しています。Angularの古い版に留まる案件では、ラッパーも旧版を選ぶことになります。ReactとVueのどちらで画面を作るかが決まっていない段階なら、ReactとVue 3の違いで先にフレームワークを決めてからラッパーを選んでください。

関連記事

• Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け：無償で軽いグラフを選ぶときの導入コードと間引き設定を確認できます
• EChartsとは？6.1系の部分インポートと大量データの描画設定・Chart.jsとの選び分け：Apache-2.0で大量データと地図まで扱う選択肢を比べられます
• Rechartsとは？3.10系の導入コードとSVG描画の限界・Chart.jsとの選び分け：React専用のSVG描画を選ぶ条件を確かめられます
• AG Gridとは：36系の導入コードと仮想スクロール・Enterprise版が要る機能の判断：有償版が要る機能の見極め方を表の部品で確認できます
• オープンソースライセンスとは？主要9種の商用利用可否と義務を条項番号で解説：無償ライブラリ側のライセンス義務を条項で確かめられます