Linien-Diagrammoptionen

LineChartOptions API. Konfigurieren Sie Serien, Achsen, Interaktion, Animation, Beschriftungen, Overlays und Detailstufe.

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

Verwenden Sie den oben gezeigten öffentlichen Einstiegspunkt. Reine Typimporte werden aus dem Anwendungs-JavaScript entfernt.

BandOptions

Bereichs-/Band-spezifische visuelle Optionen

Import @sixtyfold/lineSchnittstelle

interface BandOptions
MemberDefinitionBeschreibung
borderColor?string | undefinedGemeinsame Randfarbe für obere und untere Begrenzungen (standardmäßig Serienfarbe, wenn ein Rand aktiviert ist)
borderStyle?BandBorderStyle | undefined
= solid
Linienstil des Rands
borderWidth?number | undefinedRahmenbreite in Pixeln. Auf 0 setzen, um Rahmen zu deaktivieren.
fill?number | boolean | undefinedBand füllen. - false: keine Füllung des Bands - true: mit Serienfarbe bei Standard-Deckkraft füllen - Zahl (0–1): mit Serienfarbe bei angegebener Deckkraft füllen
fillColor?string | SeriesGradient | undefinedFarbe der Bandfüllung — einfarbige Farbzeichenfolge oder Gradientenobjekt. Überschreibt die Füll-Deckkraft, falls angegeben
lowerBorderColor?string | undefinedÜberschreibt die Farbe für die untere Grenze
upperBorderColor?string | undefinedÜberschreibt die Farbe für die obere Grenze

BarOptions

Balken-/Säulen-spezifische visuelle Optionen

Import @sixtyfold/lineSchnittstelle

interface BarOptions
MitgliedDefinitionBeschreibung
baseline?number | undefined
= 0
Datenwert, von dem die Balken ausgehen
borderColor?string | undefinedGemeinsame Balkenrandfarbe (standardmäßig Serienfarbe, wenn ein Rand aktiviert ist)
borderStyle?BarBorderStyle | undefined
= solid
Linienstil des Randes
borderWidth?number | undefinedRandbreite in Pixeln. Auf 0 setzen, um Ränder zu deaktivieren.
fill?number | boolean | undefinedFülle die Balken. - false: keine Balkenfüllung - true: mit Serienfarbe bei Standarddeckkraft füllen - Zahl (0–1): mit Serienfarbe bei angegebener Deckkraft füllen
fillColor?string | SeriesGradient | undefinedFarbe der Balkenfüllung - Farbstring oder Verlaufobjekt. Überschreibt die Füllungsdeckkraft, falls angegeben
maxWidth?number | undefined
= 24
Maximale Balkenbreite in Pixel
minWidth?number | undefined
= 1
Minimale Balkenbreite in Pixel
widthRatio?number | undefined
= 0.7
Anteil des verfügbaren Stichprobenabstands, der von jeder Leiste verwendet wird

LegendLabelFontOptions

Optionen für die Schriftart der Legendenbeschriftung.

Import @sixtyfold/lineinterface

interface LegendLabelFontOptions
MemberDefinitionBeschreibung
color?string | undefined
= #cfd6e6
Schriftfarbe
family?string | undefined
= DEFAULT_CHART_FONT_FAMILY
Schriftfamilie
size?number | undefined
= 12
Schriftgröße in px
style?"normal" | "italic" | "oblique" | undefined
= normal
Schriftstil
weight?string | number | undefined
= normal
Schriftstärke
width?number | undefined
= auto
Maximale Beschriftungsbreite in px

LegendOptions

Platzierung, Layout, Typografie, Farbmuster und Interaktion für die eingebaute Canvas2D-Legende.

Import @sixtyfold/lineSchnittstelle

interface LegendOptions
MitgliedDefinitionBeschreibung
align?LegendAlign | undefined
= center
Ausrichtung im Legendenbereich
allowHideAll?boolean | undefined
= false
Erlaube das Ausblenden aller Serien
inactiveOpacity?number | undefined
= 0.45
Deckkraft für ausgeblendete Legenden-Einträge von Serien
interactive?boolean | undefined
= false
Klick-zum-Umschalten-Interaktion aktivieren
itemGap?number | undefined
= 12
Abstand zwischen Elementen in px
labelFont?LegendLabelFontOptions | undefinedLegendenbeschriftungs-Schriftstil
layout?LegendLayout | undefined
= column
Elementlayout
padding?{ top?: number; right?: number; bottom?: number; left?: number; } | undefined
= 8
Innenabstand innerhalb des Legendenbereichs in px
position?LegendPosition | undefined
= right
Legendenposition um den Diagrammbereich
swatch?LegendSwatchOptions | undefinedOptionen für Swatch-Stil
swatchGap?number | undefined
= 6
Abstand zwischen Swatch und Beschriftung in px
visible?boolean | undefinedZeigt die Legende an. Standardmäßig aktiviert, wenn legend angegeben ist; ohne legend ist sie deaktiviert.

LegendSwatchOptions

Optionen für das Legenden-Swatch.

Import @sixtyfold/lineinterface

interface LegendSwatchOptions
MemberDefinitionBeschreibung
borderColor?string | undefined
= transparent
Farbrand der Musterfläche
borderWidth?number | undefined
= 0
Randbreite der Musterfläche in px
shape?LegendSwatchShape | undefined
= circle
Form der Musterfläche
size?number | undefined
= 10
Größe der Musterfläche in px

LineAppearanceOptions

Linien-Diagramm Erscheinungsbild — Basis-Erscheinung + Legende + Marker

Import @sixtyfold/lineSchnittstelle

interface LineAppearanceOptions extends BaseAppearanceOptions
MitgliedDefinitionBeschreibung
axis?AxisAppearanceOptions | undefinedLaufzeit-Erscheinungsoptionen für Achse.
chartBackground?BackgroundOptions | undefinedLaufzeit-Erscheinungsoptionen für den Diagrammhintergrund.
crosshairStyle?CrosshairOptions | undefinedLaufzeit-Erscheinungsoptionen für das Fadenkreuz-Styling.
grid?GridOptions | undefinedLaufzeit-Erscheinungsoptionen für das Grid.
labels?ChartLabels | undefinedLaufzeit-Erscheinungsoptionen für Beschriftungen.
legend?LegendOptions | undefinedLaufzeit-Erscheinungsoptionen für Legende.
marker?MarkerOptions | undefinedLaufzeit-Erscheinungsoptionen für Marker.
overlay?OverlayOptions | undefinedLaufzeit-Erscheinungsoptionen für Overlay.
padding?PaddingOptions | undefinedLaufzeit-Erscheinungsoptionen für Padding.
rangeSelector?RangeSelectorAppearanceOptions | undefinedLaufzeit-Darstellungsoptionen für die Bereichsauswahl.
selection?SelectionOptions | undefinedLaufzeit-Darstellungsoptionen für die Auswahl.
textDirection?TextDirection | undefinedLaufzeit-Darstellungsoptionen für die Textrichtung.
tooltip?TooltipOptions | undefinedLaufzeit-Darstellungsoptionen für Tooltip.

LineChartOptions

Konstruktions-, Interaktions-, Erscheinungs-, Serien- und LOD-Optionen für ein Liniendiagramm.

Import @sixtyfold/lineSchnittstelle

interface LineChartOptions
MitgliedDefinitionBeschreibung
animated?boolean | undefinedAnimiert das Offenlegen von Daten sowie Viewport-/Achsen‑Übergänge. Wenn ausgelassen, ist die Animation aktiviert, sofern der Browser nicht prefers-reduced-motion: reduce meldet.
axis?AxisOptions | undefinedAchsenanpassung (Linienfarbe und Beschriftungsfarben)
chartBackground?BackgroundOptions | undefined
= #16213e
Diagrammhintergrund (deckt die gesamte Canvas einschließlich Vorschau-Bereich ab). Kann ein einfarbiger Farbstring, eine Verlaufdefinition oder ein Bild sein.
crosshairStyle?CrosshairOptions | undefinedFadenkreuzlinienstil (vertikale und horizontale Hilfslinien)
grid?GridOptions | undefinedRasterlinienanpassung für Hauptdiagramm
interactive?boolean | undefined
= true
Aktivieren von Benutzerinteraktionen (Pan/Zoom/Pinch). Wenn false, ist das Diagramm nur zur Ansicht, zeigt aber weiterhin Fadenkreuz/Tooltip beim Hover an.
interpolation?"none" | "linear" | "spline" | undefined
= linear
Interpolationsmodus für Werte zwischen Datenpunkten - 'none': keine Interpolation, auf den nächsten Datenpunkt einrasten - 'linear': lineare Interpolation zwischen benachbarten Punkten - 'spline': Catmull‑Rom‑Spline‑Interpolation für glatte Kurven
keepAliveInterval?number | undefined
= 0 (disabled)
Keep‑alive‑Intervall in Sekunden, um zu verhindern, dass Safari GPU‑Ressourcen freigibt. Safari bereinigt aggressiv "nicht verwendete" Canvas‑Elemente, was zu leeren Diagrammen führt.
keyboardActivation?"focus" | "hover" | undefinedWie Tastatursteuerungen aktiv werden. - "focus" (Standard): das Diagramm muss DOM‑Fokus haben - "hover": das Diagramm unter dem Mauszeiger erhält Tastaturnavigation
keyboardAnnouncements?false | KeyboardAnnouncementMessages | undefinedLokalisieren Sie Tastatur-Aktionsansagen für unterstützende Technologien, oder setzen Sie false, um sie zu deaktivieren. Weggelassene Meldungen verwenden prägnante englische Standardtexte.
keyboardPanSpeed?number | undefined
= 0.1 (10%)
Tastatur-Pan-Geschwindigkeit (Pfeiltasten). Bruchteil des sichtbaren Bereichs, um den pro Tastendruck verschoben wird.1 (10%)
keyboardZoomSpeed?number | undefined
= 0.1 (10% per keypress)
Tastatur-Zoom-Geschwindigkeit (+/- Tasten). Höhere Werte = schnelleres Zoomen.1 (10% pro Tastendruck)
labels?ChartLabels | undefinedTextbeschriftungen rund um das Diagramm (Titel, Achsenbeschriftungen)
legend?LegendOptions | undefinedLegendenoptionen für Serien
lod?LineLODOptions | undefinedPräsentationsrichtlinie der Detailstufe.
marker?MarkerOptions | undefinedStandard-Markierungsstil für Hover-Punkte (kann pro Serie überschrieben werden)
minViewportRange?number | undefinedKleinste interaktive X-Viewport-Spanne, angegeben in denselben Einheiten wie die X-Werte des Diagramms. Ungültige oder nicht positive Werte behalten die Standardwerte des Diagrammtyps bei. Diese Konstruktionsoption ist nicht Teil des veränderbaren Erscheinungsbilds.
overlay?OverlayOptions | undefinedDeklarative Overlay-Primitiven, gerendert über dem Diagramminhalt
padding?PaddingOptions | undefined
= { top: 20, right: 80, bottom: 40, left: 80 }
Benutzerdefinierte Innenabstände in Pixeln
rangeSelector?RangeSelectorOptions | undefinedBereichsauswahl (Vorschau-Diagramm) Konfiguration
rendererInitializationTimeout?number | undefined
= 15000
Maximale Zeit in Millisekunden, die für den Renderer-Start erlaubt ist. Der Watchdog beginnt während der Diagrammkonstruktion, sodass er auch Anwendungen schützt, die nicht auf BaseChart.initialize warten. Auf 0 setzen, um ihn zu deaktivieren.
renderMode?"auto" | "worker" | "main" | undefinedAuswahl des Rendering-Modus. auto bevorzugt Worker + OffscreenCanvas; worker erzwingt Worker-Rendering mit Main-Thread-Fallback; main rendert im Browser-Main-Thread und benötigt ein DOM.
selection?SelectionOptions | undefinedStyling der Bereichsauswahl (Ziehen zum Zoomen)
series?SeriesOptions[] | undefinedSerien-spezifische Konfiguration (Farben, Füllungen, Verläufe)
textDirection?TextDirection | undefined
= inherit
Richtung, die für Canvas2D-Text verwendet wird. Verwenden Sie "auto", um aus dem ersten starken Zeichen jedes Strings zu schließen, oder "rtl"/"ltr", um eine diagrammweite Richtung zu erzwingen.
tooltip?TooltipOptions | undefinedTooltip-(Fadenkreuz-Infobox)-Styling
wheelZoomDirection?"up-in" | "up-out" | undefinedMausrad-Zoomrichtung. - „up-in“ (Standard): Rad nach oben/zurück zoomt hinein, Rad nach unten/vorwärts zoomt heraus - „up-out“: Rad nach oben/zurück zoomt heraus, Rad nach unten/vorwärts zoomt hinein
wheelZoomSpeed?number | undefined
= 0.1 (10% per wheel tick)
Mausrad-Zoomgeschwindigkeit. Höhere Werte = schnelleres Zoomen.1 (10% pro Mausrad-Tick)
yDomain?YDomainOptions | undefinedKlemmen Sie eine oder beide Kanten der dargestellten Y-Domäne fest. Weggelassene Kanten skalieren weiterhin automatisch anhand sichtbarer Daten. Werden beide endlichen Kanten angegeben, bleibt der Y-Viewport über Zoom, LOD-Auswahl und Streaming-Updates hinweg stabil. Die Option ist standardmäßig deaktiviert und gehört zur Konstruktionskonfiguration, nicht zur veränderbaren Darstellung.

LineChartStatsOptions

Steuert, wie häufig Telemetriedaten der Linie veröffentlicht werden.

Import @sixtyfold/lineSchnittstelle

interface LineChartStatsOptions
MitgliedDefinitionBeschreibung
intervalMs?number | undefined
= 250
Mindestintervall zwischen Statistikaktualisierungen in Millisekunden

LineDataUpdateOptions

Steuert die animierte Übergangsbewegung, die bei einem massenhaften Austausch der Liniendaten verwendet wird.

Import @sixtyfold/lineSchnittstelle

interface LineDataUpdateOptions
MitgliedDefinitionBeschreibung
preservePreviousFrame?boolean | undefinedHalten Sie die zuvor gerenderte Darstellung vor der Enthüllungsgrenze sichtbar, während ein animierter Ersatzdatensatz gezeichnet wird. Standard ist false. Warten Sie, bis die vorherige Enthüllung beendet ist, bevor Sie diese Option verwenden; andernfalls bleibt ihr teilweise enthülltes Frame, einschließlich etwaiger leerer Reste, erhalten. Die zurückgehaltenen Pixel sind statisch, sodass Schwenken oder Zoomen während der neuen Enthüllung eine temporäre Gitter-/Datennaht erzeugen kann, bis die Übergangsanimation abgeschlossen ist.

LineLODOptions

Stabile Darstellungspolitik im Bildschirmraum sowie Koeffizienten für Treue/Glätte.

Import @sixtyfold/lineinterface

interface LineLODOptions
MemberDefinitionBeschreibung
density?number | undefined
= 0.75
Ziel-Darstellungsspalten pro CSS-Pixel und primäre Treue/Arbeitssteuerung. Höhere Werte erhalten mehr lokale Details und erhöhen den Rendering-Aufwand.
mode?"pyramid" | "adaptive" | undefinedadaptive verwendet wo unterstützt eine stabile, viewport‑bewusste Bildschirmraumdarstellung. pyramid wählt unter den vorgefertigten globalen LOD‑Stufen aus.
quantizationStep?number | undefined
= 0.25
Additives Rasterintervall innerhalb jeder binären Oktave. Kleinere Werte ermöglichen engere Rasterbreiten und verringern Textursprünge bei höherem Abfrageaufwand. Für sanfte Übergänge mit einem ähnlichen Rebase‑Skalierungsfaktor koppeln (zum Beispiel 0,1 mit 1,1–1,12).
rebaseRatio?number | undefined
= 1.25
Maximale projizierte Spaltenbreitendrift bevor das Sticky‑Raster neu basiert. Die Untergrenze ist deren Kehrwert. Niedrigere Werte führen zu kleineren, häufigeren Darstellungswechseln.

MarkerGlowOptions

Optionaler Leuchteffekt für Hover‑Marker

Import @sixtyfold/lineSchnittstelle

interface MarkerGlowOptions
MemberDefinitionBeschreibung
blur?number | undefined
= 12
Glow-Weichzeichneradius in Pixeln
color?string | undefinedGlühfarbe (Standard: Marker-Füllung/Serienfarbe)
opacity?number | undefined
= 0.45
Leucht-Opazität 0–1

MarkerOptions

Marker-Optionen für Hover-Punkt-Indikatoren

Import @sixtyfold/lineSchnittstelle

interface MarkerOptions
MitgliedDefinitionBeschreibung
borderColor?string | undefined
= #fff
Rand-/Konturfarbe
borderWidth?number | undefined
= 1
Rand-/Konturstärke in Pixel
glow?boolean | MarkerGlowOptions | undefinedOptionaler Leuchteffekt um das Marker-Symbol
shape?MarkerShape | undefined
= circle
Markerform
size?number | undefined
= 5
Markierungsgröße in Pixeln — Radius bei Kreis, halbe Breite bei anderen

PointOptions

Scatter-/Punkte-spezifische visuelle Optionen

Import @sixtyfold/lineinterface

interface PointOptions
MitgliedDefinitionBeschreibung
borderColor?string | undefined
= #fff
Punktrand-/Konturfarbe
borderWidth?number | undefined
= 0
Punktrand-/Konturbreite in Pixel
color?string | undefinedPunktfüllfarbe (Standard: Serienfarbe)
opacity?number | undefined
= 1
Punkt-Opazität 0–1
shape?MarkerShape | undefined
= circle
Punktform
size?number | undefined
= 3
Punktgröße in Pixel — Radius bei Kreis, halbe Breite bei anderen

SeriesAppearanceOptions

Erscheinungsfelder pro Serie — nur visuell und präsentationsbezogen

Import @sixtyfold/linetype

type SeriesAppearanceOptions = Pick<SeriesOptions, "type" | "color" | "fill" | "fillColor" | "fillToZero" | "fillEffect" | "band" | "bar" | "stack" | "point" | "width" | "name" | "unit" | "marker">
MemberDefinitionBeschreibung
band?BandOptions | undefinedBereichs-/Banden-spezifische Füllungs- und Randgestaltung
bar?BarOptions | undefinedBalken/Spalten-spezifische Füllungs-, Rand-, Breiten- und Basisliniengestaltung
color?string | undefinedLinienfarbe (fällt auf Standardpalette zurück, falls nicht angegeben)
fill?number | boolean | undefinedFüllt den Bereich unter der Linie. - false: keine Füllung (Standard) - true: Füllung mit Linienfarbe bei 40% Deckkraft - Zahl (0–1): Füllung mit Linienfarbe bei angegebener Deckkraft
fillColor?string | SeriesGradient | undefinedFüllfarbe – einfarbige Farbzeichenfolge oder Gradientobjekt. Überschreibt die Füll-Deckkraft, falls angegeben
fillEffect?"none" | "glow" | "layered" | undefinedFüllstil-Effekt - 'none': flächige Farbfüllung (Standard) - 'glow': sanfter Leuchteffekt, der von der Linie ausgeht - 'layered': gestapelte Füllungen mit unterschiedlicher Deckkraft für Tiefenwirkung
fillToZero?boolean | undefined
= true
Auf die Null-Basislinie füllen statt bis zum Diagrammfuß Wenn true: positive Werte füllen bis zur Null, negative füllen bis zur Null nach oben Wenn false: immer bis zum Diagrammfuß füllen
marker?MarkerOptions | undefinedMarker-Stil für den Hover-Punkt dieser Serie (überschreibt das chartweite Marker-Design)
name?string | undefinedAnzeigename der Serie (wird in Legende und Tooltip verwendet).
point?PointOptions | undefinedScatter-/Punkte-spezifische Marker-Stilgestaltung
stack?StackOptions | undefinedStacked-Area-spezifische Füll- und obere Begrenzungs-Stilgebung
type?LineSeriesType | undefined
= line
Linienzeichnungsstil. „step“ ist ein Alias für „step-after“; „band“ ist ein Alias für „range“; „points“ ist ein Alias für „scatter“; „column“ ist ein Alias für „bar“; „stackedArea“ ist ein Alias für „stacked-area“.
unit?UnitOptions | undefinedEinheitliche Konfiguration für diese Serie (verwendet in Tooltip und Achsenbeschriftungen)
width?number | undefined
= 1.5
Linienstrichbreite in Pixeln. Auf 0 setzen, um den Strich zu unterdrücken und gleichzeitig Bereichsfüllungen, Tooltips und andere Serienebenen beizubehalten.

SeriesGradient

Gradientendefinition für die Serienfüllung

Import @sixtyfold/lineSchnittstelle

interface SeriesGradient
MitgliedDefinitionBeschreibung
colorsstring[]CSS-Farbstopps (mindestens 2); ungültige Farben werden übersprungen.
direction?"vertical" | "horizontal" | undefined
= vertical
Verlaufsausrichtung
offsets?number[] | undefinedOptionale Versatzpositionen für jede Farbe (0–1), Standard verteilt gleichmäßig

SeriesOptions

Konfiguration für eine einzelne Serie

Import @sixtyfold/lineSchnittstelle

interface SeriesOptions
MitgliedDefinitionBeschreibung
band?BandOptions | undefinedBereichs-/Band-spezifische Füllungs- und Randgestaltung
bar?BarOptions | undefinedBalken-/Säulen-spezifische Füllung, Rand, Breite und Basisliniengestaltung
color?string | undefinedLinienfarbe (fällt auf die Standardpalette zurück, wenn nicht angegeben)
fill?number | boolean | undefinedFüllt die Fläche unter der Linie. - false: keine Füllung (Standard) - true: Füllung mit Linienfarbe bei 40 % Deckkraft - Zahl (0–1): Füllung mit Linienfarbe bei angegebener Deckkraft
fillColor?string | SeriesGradient | undefinedFüllfarbe – Farbangabe als durchgehende Farbe oder Gradientobjekt. Überschreibt die Füllopazität, falls
fillEffect?"none" | "glow" | "layered" | undefinedFülleffekt – 'none': einfarbige Füllung (Standard) – 'glow': weiches Leuchten, das von der Linie ausgeht – 'layered': gestapelte Füllungen mit variierender Opazität für Tiefenwirkung
fillToZero?boolean | undefined
= true
Fülle zur Null-Baseline statt zum Diagrammuntergrund Wenn true: positive Werte füllen bis zu null nach unten, negative füllen bis zu null nach oben Wenn false: immer bis zum Diagrammuntergrund füllen
marker?MarkerOptions | undefinedMarker-Stil für den Hover-Punkt dieser Serie (überschreibt das chartweite Marker-Setting)
name?string | undefinedSerienanzeige‑Name (wird in Legende und Tooltip verwendet).
point?PointOptions | undefinedScatter-/Punkt‑spezifische Marker‑Stilisierung
stack?StackOptions | undefinedGestapelte‑Fläche‑spezifische Füll‑ und Obergrenzen‑Stilisierung
type?LineSeriesType | undefined
= line
Zeichenstil der Serie. "step" ist ein Alias für "step-after"; "band" ist ein Alias für "range"; "points" ist ein Alias für "scatter"; "column" ist ein Alias für "bar"; "stackedArea" ist ein Alias für "stacked-area".
unit?UnitOptions | undefinedEinheitkonfiguration für diese Serie (verwendet in Tooltip und Achsenbeschriftungen)
width?number | undefined
= 1.5
Linienstrichbreite in Pixeln. Auf 0 setzen, um den Strich zu unterdrücken und gleichzeitig Bereichsfüllungen, Tooltips und andere Serienstufen beizubehalten.

StackOptions

Spezifische visuelle Optionen für gestapelte Flächen

Import @sixtyfold/lineinterface

interface StackOptions
MemberDefinitionDescription
borderColor?string | undefinedObere Begrenzungsfarbe (Standard: Serienfarbe)
borderStyle?StackBorderStyle | undefined
= solid
Stil der oberen Begrenzungslinie
borderWidth?number | undefinedBreite der oberen Begrenzung in Pixeln (Standard: Serienbreite). Auf 0 setzen, um zu deaktivieren.
curve?StackCurveStyle | undefined
= linear
Begrenzungsform für das gefüllte Band und die obere Begrenzung.
fill?number | boolean | undefinedFläche des gestapelten Bereichs füllen. - false: keine Flächenfüllung - true: mit Serienfarbe bei Standardopacity füllen - Zahl (0–1): mit Serienfarbe bei angegebener Opazität füllen
fillColor?string | SeriesGradient | undefinedFüllfarbe des Bereichs – konstante Farbstring oder Gradientenobjekt. Überschreibt die Füllopazität, falls angegeben