Highsoft社は、JavaScriptグラフライブラリ「Highcharts」のメジャーアップデートとなる Highcharts v13 をリリースしました。
今回のv13では、グラフの設定をより簡単にし、ブランドカラーへの対応やダークモード対応をしやすくするための機能が強化されています。また、表形式データをそのまま扱いやすくするDataTable対応、必要なモジュールを自動で読み込む実験的なAutoload機能、ゲージや日時軸、データラベル、ツールチップなどの表示改善も行われています。
カラーパレットによる色管理の一元化
Highcharts v13では、新たに palette オプションが導入されました。これにより、チャート全体で使用する色を一か所で定義できるようになり、複数のグラフを含むダッシュボードや、ブランドカラーを統一したいWebアプリケーションでの管理が容易になります。
ライトモードとダークモードそれぞれの背景色、ハイライト色、系列色などをまとめて設定できるため、デザインの一貫性を保ちながら、環境に応じた見やすいチャートを作成しやすくなります。従来のAdaptive themeは、この新しいpaletteレイヤーに置き換えられます。
DataTableによる表形式データの利用
これまでHighchartsでは、グラフデータを series.data の形式に合わせて指定するのが一般的でした。v13では、DataTable を利用して、データベース、CSV、APIレスポンス、ダッシュボード用の共通データセットなど、表形式のデータをより自然にグラフへマッピングできるようになりました。
列名を指定してX軸やY軸に割り当てることができるため、データ構造をグラフ用に大きく変換する手間を減らせます。複数系列のグラフでも、1つのテーブルをもとに系列ごとの値を割り当てられるため、データ量の多いダッシュボードや業務アプリケーションで特に便利です。
実験的なAutoload機能を追加
v13では、実験的な機能として highcharts-autoload.js が追加されました。これは、チャート設定を確認して必要なモジュールを自動的に読み込む仕組みです。
たとえば、バブルチャート、エクスポート機能、アクセシビリティ機能などを利用する場合、本来は対応するモジュールを個別に読み込む必要があります。Autoloadを利用すると、チャート描画前に必要な依存関係を解決できるため、CMS、チャートエディタ、保存済みダッシュボード設定、AIで生成されたチャート設定など、動的にチャート構成が作られる場面で役立ちます。
一方で、製品で利用するモジュールが明確に決まっている場合は、従来どおり必要なモジュールを明示的にバンドルする方法も引き続き有効です。
ゲージ表示や日時軸ラベルも改善
Highcharts v13では、ゲージチャートのデフォルト表示も改善されています。円形レイアウトに合わせたラベル配置、より自然なペイン設定、見やすいダイヤル表示などにより、少ない設定でも洗練されたゲージを作成しやすくなりました。
また、日時軸では、年・月・日・時刻などの境界に応じたラベル表示をより柔軟に制御できるようになっています。長期間の時系列データやHighcharts Stockを利用したチャートで、軸ラベルをより分かりやすく表示できます。
データラベルとツールチップの視認性を向上
データラベルについては、dataLabels.backgroundColor に contrast を指定できるようになりました。積み上げ棒グラフ、円グラフ、地図など、背景色が複雑になりやすいチャートでも、ラベルの読みやすさを確保しやすくなります。
さらに、ツールチップのヘッダー表示や凡例シンボル、ポイントアニメーション、プロットエリアの角丸表示など、細かなデザイン・UX面の改善も加えられています。
アップグレード時の注意点
Highcharts v13では、ゲージやポーラーチャートのデフォルト表示、データソート機能のモジュール分離、solid gaugeの半径指定、データラベルの位置など、一部既存チャートの見た目や挙動に影響する変更があります。既存環境でアップグレードする場合は、公式のアップグレード情報を確認したうえで、表示確認を行うことをおすすめします。
まとめ
Highcharts v13は、単なる機能追加だけでなく、チャートの設計・保守・表示品質を高めるためのメジャーアップデートです。特に、複数のチャートを扱うダッシュボード、ブランドカラーを重視するWebサービス、表形式データを扱う業務アプリケーションでは、今回の新機能によって開発・運用の効率化が期待できます。
Highchartsを利用中の方、またはWebアプリケーションやダッシュボードで高度なデータ可視化を検討している方は、Highcharts v13の新機能をぜひご確認ください。