軸の種類と設定

概要

• XYチャートやXYZチャートの軸は、描画のされ方によって、カテゴリ軸・日時軸・数値軸に分類されます
• 軸の設定をカスタマイズするには AxisSettings を指定します

軸の種類

カテゴリ軸

カテゴリ軸では、指定された値が数値型や日付・日時型であっても、離散的な値として等間隔に描画されます。

軸上の値の指定方法

カテゴリ軸で軸の上限値や下限値を指定した場合、指定された値はデータの並び順のインデックス（0番目、1番目、2番目...）として扱われます。

インデックス	X軸の値
0番目	1
1番目	10
2番目	20
3番目	30
...	...
10番目	100

この場合、軸の上限を 10 に設定すると、10番目のデータまで表示されるため、X軸の値が 100 まで表示されます。

日時軸

日時軸では、指定された日付・日時型のデータが連続的な時系列として描画されます。

• 軸のラベルは、指定された日付・日時のデータを元に動的に決定されます
• タイムゾーン付きの日時型のデータを指定した場合、ブラウザで指定されたタイムゾーンに変換して描画されます
  • 軸のラベルはブラウザで指定されたタイムゾーンに基づいて表示されるため、ブラウザ側のタイムゾーンとデータのタイムゾーンが一致しない場合、軸ラベルとデータラベルがズレて描画されます
  • タイムゾーンの無い日時型に変換することで、ブラウザ側のタイムゾーンの影響を受けないようにすることも可能です

軸上の値の指定方法

日時軸で軸の上限値や下限値を設定する場合は、UNIX時間（ミリ秒）で値を指定します。例えば、日本時間の2026年1月1日0時0分0秒は、1767193200000 となります。

数値軸

数値軸では、指定された数値型のデータが連続的な数値として描画されます。

AxisSettings の型定義

• 以下の型については、該当ドキュメントを参照してください
  • FormatterSettings
  • ReferenceLine
• min や max の値は軸の種類によって指定方法が異なるため、上記の各軸の説明を参照してください

type AxisSettings = {
  hide?: boolean; // 軸を非表示にする場合は true を指定
  name?: string; // 軸のタイトル
  hide_label?: boolean; // 軸ラベルを非表示にする場合は true を指定
  rotate_label?: boolean; // 軸を90度回転させる場合は true を指定
  label_max_size?: number; // 軸ラベルの最大幅をpxで指定
  min?: number; // 軸の下限値を指定
  max?: number; // 軸の上限値を指定
  formatter?: FormatterSettings; // 軸ラベルのフォーマットを指定
  reference_lines?: ReferenceLine[]; // 軸に対して参照線（リファレンスライン）を指定
};