折れ線チャートのオプション

インポート

import type { LineChartOptions } from "@sixtyfold/line";

上記の公開エントリポイントを使用します。型のみのインポートはアプリケーション JavaScript から削除されます。

`BandOptions`

範囲／バンド固有の視覚オプション

インポート @sixtyfold/lineインターフェース

interface BandOptions

メンバー	定義	説明
`borderColor?`	`string \| undefined`	上下境界の共通境界色（ボーダーが有効な場合はデフォルトでシリーズ色）
`borderStyle?`	`BandBorderStyle \| undefined` = `solid`	ボーダーの線種
`borderWidth?`	`number \| undefined`	境界線の幅（ピクセル）。境界線を無効にするには0に設定します。
`fill?`	`number \| boolean \| undefined`	バンドの塗りつぶし。 - false: 塗りつぶしなし - true: シリーズ色で既定の不透明度で塗りつぶす - number (0-1): 指定した不透明度でシリーズ色を塗りつぶす
`fillColor?`	`string \| SeriesGradient \| undefined`	バンドの塗り色 — 単色文字列またはグラデーションオブジェクト。指定されている場合は塗り不透明度を上書きします
`lowerBorderColor?`	`string \| undefined`	下限の色を上書きします
`upperBorderColor?`	`string \| undefined`	上側境界線の色を上書き

`BarOptions`

棒/カラム固有の表示オプション

Import @sixtyfold/lineinterface

interface BarOptions

メンバー	定義	説明
`baseline?`	`number \| undefined` = `0`	棒が成長するデータ値
`borderColor?`	`string \| undefined`	共通の棒の境界線色（境界線有効時はデフォルトでシリーズ色）
`borderStyle?`	`BarBorderStyle \| undefined` = `solid`	境界線の線種
`borderWidth?`	`number \| undefined`	境界線の幅（ピクセル）。0に設定すると境界線を無効化します。
`fill?`	`number \| boolean \| undefined`	棒の塗りつぶし。- false: 塗りなし - true: シリーズの色で既定の不透明度で塗る - 数値 (0–1): 指定した不透明度でシリーズの色を塗る
`fillColor?`	`string \| SeriesGradient \| undefined`	棒の塗り色 — 単色文字列またはグラデーションオブジェクト。指定されている場合、塗りの不透明度を上書きします
`maxWidth?`	`number \| undefined` = `24`	ピクセル単位の最大バー幅
`minWidth?`	`number \| undefined` = `1`	ピクセル単位の最小バー幅
`widthRatio?`	`number \| undefined` = `0.7`	利用可能なサンプル間隔に対する各バーで使用される比率

`LegendLabelFontOptions`

凡例ラベルのフォントに関するオプション。

Import @sixtyfold/lineinterface

interface LegendLabelFontOptions

メンバー	定義	説明
`color?`	`string \| undefined` = `#cfd6e6`	フォント色
`family?`	`string \| undefined` = `DEFAULT_CHART_FONT_FAMILY`	フォントファミリー
`size?`	`number \| undefined` = `12`	フォントサイズ（px）
`style?`	`"normal" \| "italic" \| "oblique" \| undefined` = `normal`	フォントスタイル
`weight?`	`string \| number \| undefined` = `normal`	フォントウェイト
`width?`	`number \| undefined` = `auto`	最大ラベルテキスト幅（px）

`LegendOptions`

Canvas2D組み込み凡例の配置、レイアウト、タイポグラフィ、スウォッチ、インタラクション。

インポート @sixtyfold/lineインターフェイス

interface LegendOptions

Member	Definition	説明
`align?`	`LegendAlign \| undefined` = `center`	凡例領域内の配置
`allowHideAll?`	`boolean \| undefined` = `false`	すべての系列を非表示にできるようにする
`inactiveOpacity?`	`number \| undefined` = `0.45`	非表示の系列の凡例項目の不透明度
`interactive?`	`boolean \| undefined` = `false`	クリックで切り替える対話を有効にする
`itemGap?`	`number \| undefined` = `12`	項目間の間隔（ピクセル）
`labelFont?`	`LegendLabelFontOptions \| undefined`	凡例ラベルのフォントスタイル
`layout?`	`LegendLayout \| undefined` = `column`	アイテムのレイアウト
`padding?`	`{ top?: number; right?: number; bottom?: number; left?: number; } \| undefined` = `8`	凡例領域内のパディング（px）
`position?`	`LegendPosition \| undefined` = `right`	チャート領域周辺の凡例位置
`swatch?`	`LegendSwatchOptions \| undefined`	スウォッチのスタイルオプション
`swatchGap?`	`number \| undefined` = `6`	スウォッチとラベル間の間隔（px）
`visible?`	`boolean \| undefined`	凡例を表示します。`legend` を指定すると既定で有効になり、`legend` を省略すると無効になります。

`LegendSwatchOptions`

凡例スウォッチのオプション。

Import @sixtyfold/lineinterface

interface LegendSwatchOptions

メンバー	定義	説明
`borderColor?`	`string \| undefined` = `transparent`	スウォッチの境界色
`borderWidth?`	`number \| undefined` = `0`	スウォッチの境界幅（px）
`shape?`	`LegendSwatchShape \| undefined` = `circle`	スウォッチの形状
`size?`	`number \| undefined` = `10`	スウォッチのサイズ（px）

`LineAppearanceOptions`

折れ線グラフの外観 — ベース外観 + 凡例 + マーカー

Import @sixtyfold/lineinterface

interface LineAppearanceOptions extends BaseAppearanceOptions

メンバー	定義	説明
`axis?`	`AxisAppearanceOptions \| undefined`	ランタイムでの軸の外観オプション。
`chartBackground?`	`BackgroundOptions \| undefined`	チャートの背景に関する実行時表示オプション。
`crosshairStyle?`	`CrosshairOptions \| undefined`	クロスヘアスタイルに関する実行時表示オプション。
`grid?`	`GridOptions \| undefined`	グリッドに関する実行時表示オプション。
`labels?`	`ChartLabels \| undefined`	ラベルに関する実行時表示オプション。
`legend?`	`LegendOptions \| undefined`	凡例の実行時表示オプション。
`marker?`	`MarkerOptions \| undefined`	マーカーの実行時表示オプション。
`overlay?`	`OverlayOptions \| undefined`	オーバーレイの実行時表示オプション。
`padding?`	`PaddingOptions \| undefined`	パディングの実行時表示オプション。
`rangeSelector?`	`RangeSelectorAppearanceOptions \| undefined`	範囲セレクターのランタイム表示オプション。
`selection?`	`SelectionOptions \| undefined`	選択のランタイム表示オプション。
`textDirection?`	`TextDirection \| undefined`	テキスト方向のランタイム表示オプション。
`tooltip?`	`TooltipOptions \| undefined`	ツールチップのランタイム表示オプション。

`LineChartOptions`

ラインチャートの構築、操作、外観、系列、および詳細度（LOD）オプション。

インポート @sixtyfold/lineインターフェース

interface LineChartOptions

メンバー	定義	説明
`animated?`	`boolean \| undefined`	データの表示およびビューポート/軸の遷移をアニメーション化します。省略した場合、ブラウザが`prefers-reduced-motion: reduce`を報告していない限りアニメーションは有効になります。
`axis?`	`AxisOptions \| undefined`	軸のカスタマイズ（線色およびラベル色）
`chartBackground?`	`BackgroundOptions \| undefined` = `#16213e`	チャート背景（プレビュー領域を含むキャンバス全体を覆います）。単色文字列、グラデーション定義、または画像を指定できます。
`crosshairStyle?`	`CrosshairOptions \| undefined`	クロスヘア線のスタイリング（垂直および水平のガイド線）
`grid?`	`GridOptions \| undefined`	メインチャートのグリッド線カスタマイズ
`interactive?`	`boolean \| undefined` = `true`	ユーザー操作（パン／ズーム／ピンチ）を有効にします。false の場合、チャートは閲覧専用になりますが、ホバー時のクロスヘア／ツールチップは表示されます。
`interpolation?`	`"none" \| "linear" \| "spline" \| undefined` = `linear`	データ点間の値の補間モード — 'none': 補間なし、最も近いデータ点にスナップ — 'linear': 隣接点間の線形補間 — 'spline': 滑らかな曲線のための Catmull-Rom スプライン補間
`keepAliveInterval?`	`number \| undefined` = `0 (disabled)`	Safari が GPU リソースを解放するのを防ぐためのキープアライブ間隔（秒）。Safari は「未使用」キャンバスを積極的にクリーンアップし、チャートが白くなることがあります。
`keyboardActivation?`	`"focus" \| "hover" \| undefined`	キーボード操作が有効になる方法。- "focus"（デフォルト）：チャートが DOM フォーカスを持つ必要がある - "hover": マウスポインタ下のチャートがキーボードナビゲーションを受け取る
`keyboardAnnouncements?`	`false \| KeyboardAnnouncementMessages \| undefined`	支援技術向けにキーボード操作のアナウンスをローカライズするか、無効化するには `false` を設定してください。省略されたメッセージは簡潔な英語のデフォルトが使用されます。
`keyboardPanSpeed?`	`number \| undefined` = `0.1 (10%)`	キーボードでのパン速度（矢印キー）。各キー押下ごとに表示範囲の何分の一をパンするか。1（10%）
`keyboardZoomSpeed?`	`number \| undefined` = `0.1 (10% per keypress)`	キーボードズーム速度（+/-キー）。値が大きいほどズームが速くなります。1（各キー押下で10%）
`labels?`	`ChartLabels \| undefined`	チャート周辺のテキストラベル（タイトル、軸ラベル）
`legend?`	`LegendOptions \| undefined`	系列凡例オプション
`lod?`	`LineLODOptions \| undefined`	詳細度表示ポリシー。
`marker?`	`MarkerOptions \| undefined`	ホバー時ポイントの既定マーカースタイル（系列ごとに上書き可能）
`minViewportRange?`	`number \| undefined`	インタラクティブなXビューポートの最小幅（チャートのX値と同じ単位で表現）。無効または非正の値はチャートタイプの既定値を維持します。この構成オプションは可変の外観設定には含まれません。
`overlay?`	`OverlayOptions \| undefined`	チャートコンテンツの上にレンダリングされる宣言的オーバーレイプリミティブ
`padding?`	`PaddingOptions \| undefined` = `{ top: 20, right: 80, bottom: 40, left: 80 }`	ピクセル単位のカスタムパディング
`rangeSelector?`	`RangeSelectorOptions \| undefined`	範囲セレクター（プレビュー表示チャート）の設定
`rendererInitializationTimeout?`	`number \| undefined` = `15000`	レンダラー起動に許可される最大時間（ミリ秒）。ウォッチドッグはチャート構築中に開始するため、`BaseChart.initialize`をawaitしないアプリケーションも保護します。無効にするには`0`に設定してください。
`renderMode?`	`"auto" \| "worker" \| "main" \| undefined`	描画モードを選択します。`auto` は Worker + OffscreenCanvas を優先し、`worker` は未対応時にメインスレッドへフォールバックし、`main` は DOM を必要とするブラウザーのメインスレッドで描画します。
`selection?`	`SelectionOptions \| undefined`	選択範囲（ドラッグでズーム）のスタイル指定
`series?`	`SeriesOptions[] \| undefined`	シリーズごとの設定（色、塗りつぶし、グラデーション）
`textDirection?`	`TextDirection \| undefined` = `inherit`	Canvas2Dテキストに使用する方向。各文字列の最初の強い文字から推論するには"auto"を使用し、チャート全体の方向を強制するには"rtl"/"ltr"を使用してください。
`tooltip?`	`TooltipOptions \| undefined`	ツールチップ（クロスヘア情報ボックス）のスタイル
`wheelZoomDirection?`	`"up-in" \| "up-out" \| undefined`	マウスホイールのズーム方向。 - 「up-in」（既定）：ホイールを上／後方に回すとズームイン、下／前方でズームアウト - 「up-out」：ホイールを上／後方に回すとズームアウト、下／前方でズームイン
`wheelZoomSpeed?`	`number \| undefined` = `0.1 (10% per wheel tick)`	マウスホイールのズーム速度。値が大きいほどズームが速くなります。1（ホイール1目盛りあたり10%）
`yDomain?`	`YDomainOptions \| undefined`	描画されるYドメインの片側または両側を固定します。省略された辺は表示中のデータから自動スケールを継続します。両端の有限値を指定すると、ズーム、詳細度（LOD）選択、およびストリーミング更新間でYビューポートが安定します。このオプションはデフォルトで無効であり、可変の表示設定ではなく構築時の構成です。

`LineChartStatsOptions`

ラインのテレメトリが公開される頻度を制御します。

インポート @sixtyfold/lineインターフェース

interface LineChartStatsOptions

メンバー	定義	説明
`intervalMs?`	`number \| undefined` = `250`	統計更新の最小間隔（ミリ秒）

`LineDataUpdateOptions`

一括のラインデータ置換で使用されるアニメーション遷移を制御します。

インポート @sixtyfold/lineインターフェース

interface LineDataUpdateOptions

メンバー	定義	説明
`preservePreviousFrame?`	`boolean \| undefined`	アニメーション置換データセットが描画される間、表示境界の先で以前にレンダリングされたプロットを可視のままにします。デフォルトは false です。このオプションを使用する前に前回のリビールが終了するのを待ってください。そうしないと、未完成のリビールフレーム（空白の残りを含む）が保持されます。保持されたピクセルは静的であるため、新しいリビール中にパンやズームを行うと、遷移が完了するまで一時的なグリッド／データの継ぎ目が生じる可能性があります。

`LineLODOptions`

安定したスクリーンスペースでの表示ポリシーと忠実度／滑らかさの係数。

インポート @sixtyfold/lineインターフェース

interface LineLODOptions

メンバー	定義	説明
`density?`	`number \| undefined` = `0.75`	対象表示カラム数（CSSピクセル単位）および主要な忠実度／作業制御。値が大きいほど局所的な詳細をより保持し、レンダリング作業が増加します。
`mode?`	`"pyramid" \| "adaptive" \| undefined`	`adaptive` は、サポートされている場合にビューポートに対応したスクリーンスペース表示を使用します。`pyramid` は、事前構築されたグローバル詳細度（LOD）レベルから選択します。
`quantizationStep?`	`number \| undefined` = `0.25`	各バイナリオクターブ内の加算的グリッド間隔。値が小さいほどより細かいグリッド幅が利用可能になり、テクスチャのジャンプが減少しますがクエリコストは増えます。滑らかな遷移のために、類似のリベーススケールと組み合わせて使用してください（例：0.1 と 1.1–1.12）。
`rebaseRatio?`	`number \| undefined` = `1.25`	スティッキーグリッドがリベースするまでの最大投影列幅ドリフト。下限はその逆数です。値が小さいほど表現の変更は小さく頻繁になります。

`MarkerGlowOptions`

ホバーマーカー用のオプションのグロー効果

インポート @sixtyfold/lineインターフェース

interface MarkerGlowOptions

メンバー	定義	説明
`blur?`	`number \| undefined` = `12`	グローのぼかし半径（ピクセル）
`color?`	`string \| undefined`	グローの色（デフォルトはマーカーフィル／系列色）
`opacity?`	`number \| undefined` = `0.45`	グロー不透明度 0-1

`MarkerOptions`

ホバーポイント表示のマーカーオプション

Import @sixtyfold/lineinterface

interface MarkerOptions

メンバー	定義	説明
`borderColor?`	`string \| undefined` = `#fff`	境界線／ストロークの色
`borderWidth?`	`number \| undefined` = `1`	境界線／ストロークの幅（ピクセル）
`glow?`	`boolean \| MarkerGlowOptions \| undefined`	マーカーの周囲に任意のグロー
`shape?`	`MarkerShape \| undefined` = `circle`	マーカー形状
`size?`	`number \| undefined` = `5`	マーカーのサイズ（ピクセル）— 円の場合は半径、その他は半幅

`PointOptions`

散布図／ポイント固有の視覚オプション

インポート @sixtyfold/lineインターフェース

interface PointOptions

メンバー	定義	説明
`borderColor?`	`string \| undefined` = `#fff`	ポイントの境界線/ストロークの色
`borderWidth?`	`number \| undefined` = `0`	ポイントの境界線/ストローク幅（ピクセル）
`color?`	`string \| undefined`	ポイントの塗りの色（デフォルトはシリーズの色）
`opacity?`	`number \| undefined` = `1`	ポイントの不透明度 0–1
`shape?`	`MarkerShape \| undefined` = `circle`	点の形状
`size?`	`number \| undefined` = `3`	ピクセル単位の点サイズ — 円は半径、その他は半幅

`SeriesAppearanceOptions`

シリーズごとの表示フィールド — 視覚的およびプレゼンテーションのみ

インポート @sixtyfold/line型

type SeriesAppearanceOptions = Pick<SeriesOptions, "type" | "color" | "fill" | "fillColor" | "fillToZero" | "fillEffect" | "band" | "bar" | "stack" | "point" | "width" | "name" | "unit" | "marker">

Member	Definition	Description
`band?`	`BandOptions \| undefined`	範囲／バンドごとの塗りと境界のスタイリング
`bar?`	`BarOptions \| undefined`	棒／カラムごとの塗り、境界、幅、およびベースラインのスタイリング
`color?`	`string \| undefined`	線の色（指定がない場合はデフォルトパレットにフォールバック）
`fill?`	`number \| boolean \| undefined`	線の下の領域を塗りつぶします。 - false: 塗りつぶさない（デフォルト） - true: 線の色を40%不透明度で塗りつぶす - number (0-1): 指定した不透明度で線の色を塗りつぶす
`fillColor?`	`string \| SeriesGradient \| undefined`	塗りつぶしの色 — 単色のカラーストリングまたはグラデーションオブジェクト。指定されている場合は塗りつぶし不透明度を上書きします
`fillEffect?`	`"none" \| "glow" \| "layered" \| undefined`	塗りつぶしスタイル効果 — 'none': 平坦な単色塗り（デフォルト） - 'glow': 線から柔らかい光彩が広がる - 'layered': 深みを出すため不透明度を変えた重ね塗り
`fillToZero?`	`boolean \| undefined` = `true`	ゼロ基準まで塗りつぶす（チャート下端ではなく） true のとき: 正の値はゼロまで下方向に塗られ、負の値はゼロまで上方向に塗られます false のとき: 常にチャート下端まで塗りつぶします
`marker?`	`MarkerOptions \| undefined`	この系列のホバーポイントのマーカースタイル（チャートレベルのマーカーを上書きします）
`name?`	`string \| undefined`	系列の表示名（凡例およびツールチップで使用されます）。
`point?`	`PointOptions \| undefined`	散布図／ポイント固有のマーカーのスタイリング
`stack?`	`StackOptions \| undefined`	積み上げ面グラフ固有の塗りと上端境界のスタイリング
`type?`	`LineSeriesType \| undefined` = `line`	系列の描画スタイル。"step"は"step-after"の別名、"band"は"range"の別名、"points"は"scatter"の別名、"column"は"bar"の別名、"stackedArea"は"stacked-area"の別名です。
`unit?`	`UnitOptions \| undefined`	この系列の単位設定（ツールチップおよび軸ラベルで使用）
`width?`	`number \| undefined` = `1.5`	線のストローク幅（ピクセル）。範囲の塗り、ツールチップ、その他の系列レイヤーは維持したままストロークのみを抑制するには0に設定します。

`SeriesGradient`

系列の塗りに使うグラデーション定義

インポート @sixtyfold/lineインターフェース

interface SeriesGradient

メンバー	定義	説明
`colors`	`string[]`	CSSカラーのストップ（最小2つ）；無効な色はスキップされます。
`direction?`	`"vertical" \| "horizontal" \| undefined` = `vertical`	グラデーションの方向
`offsets?`	`number[] \| undefined`	各色のオプションのオフセット位置（0〜1）、デフォルトは均等分布

`SeriesOptions`

単一シリーズの構成

Import @sixtyfold/lineinterface

interface SeriesOptions

メンバー	定義	説明
`band?`	`BandOptions \| undefined`	範囲／バンドごとの塗りつぶしおよび境界線のスタイリング
`bar?`	`BarOptions \| undefined`	棒／カラムごとの塗りつぶし、境界線、幅、およびベースラインのスタイリング
`color?`	`string \| undefined`	線の色（指定がない場合はデフォルトパレットにフォールバック）
`fill?`	`number \| boolean \| undefined`	線の下の領域を塗りつぶします。 - false: 塗りつぶさない（デフォルト） - true: 線の色で不透明度40%で塗りつぶす - 数値（0〜1）: 指定された不透明度で線の色で塗りつぶす
`fillColor?`	`string \| SeriesGradient \| undefined`	塗りの色 — 単色文字列またはグラデーションオブジェクト。指定されている場合は塗りの不透明度を上書きします
`fillEffect?`	`"none" \| "glow" \| "layered" \| undefined`	塗りスタイル効果 — 'none': 単色塗り（デフォルト） — 'glow': 線から広がるソフトグロー — 'layered': 不透明度を変えた重ね塗りで奥行きを表現
`fillToZero?`	`boolean \| undefined` = `true`	チャートの底ではなくゼロ基準に向かって塗る true の場合：正の値はゼロまで塗り下ろし、負の値はゼロまで塗り上げる false の場合：常にチャート底まで塗る
`marker?`	`MarkerOptions \| undefined`	この系列のホバーポイント用マーカースタイル（チャートレベルのマーカーを上書き）
`name?`	`string \| undefined`	シリーズ表示名（凡例とツールチップで使用）。
`point?`	`PointOptions \| undefined`	散布／ポイント固有のマーカースタイリング
`stack?`	`StackOptions \| undefined`	積み上げエリア固有の塗りと上端境界のスタイリング
`type?`	`LineSeriesType \| undefined` = `line`	シリーズ描画スタイル。"step"は"step-after"の別名；"band"は"range"の別名；"points"は"scatter"の別名；"column"は"bar"の別名；"stackedArea"は"stacked-area"の別名。
`unit?`	`UnitOptions \| undefined`	この系列の単位設定（ツールチップと軸ラベルで使用）
`width?`	`number \| undefined` = `1.5`	線のストローク幅（ピクセル）。塗りつぶし、ツールチップ、その他の系列レイヤーを保持したままストロークのみ無効にするには0に設定します。

`StackOptions`

積み上げ面グラフ固有の表示オプション

インポート @sixtyfold/lineinterface

interface StackOptions

Member	Definition	Description
`borderColor?`	`string \| undefined`	上辺の色（既定はシリーズの色）
`borderStyle?`	`StackBorderStyle \| undefined` = `solid`	上辺の線種
`borderWidth?`	`number \| undefined`	上辺の幅（ピクセル単位、既定はシリーズ幅）。無効にするには0に設定。
`curve?`	`StackCurveStyle \| undefined` = `linear`	塗りつぶされた帯と上境界の境界形状。
`fill?`	`number \| boolean \| undefined`	積み上げ領域を塗りつぶします。 - false: 領域を塗りつぶさない - true: シリーズ色でデフォルト不透明度で塗りつぶす - 数値 (0-1): 指定した不透明度でシリーズ色を塗りつぶす
`fillColor?`	`string \| SeriesGradient \| undefined`	領域塗りつぶしの色 — 単色のカラー文字列またはグラデーションオブジェクト。指定されている場合は塗り不透明度を上書きします