60FOLDCOMPONENTS

Line chart options

LineChartOptions API. Configure series, axes, interaction, animation, labels, overlays, and LOD.

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

Use the public entry point shown above.

BandOptions

Range/band-specific visual options

Import @sixtyfold/lineinterface

interface BandOptions
MemberDefinitionDescription
borderColor?string | undefinedShared border color for upper and lower boundaries (defaults to series color when a border is enabled)
borderStyle?BandBorderStyle | undefined
= solid		Border line style
borderWidth?number | undefinedBorder width in pixels. Set to 0 to disable borders.
fill?number | boolean | undefinedFill the band. - false: no band fill - true: fill with series color at default opacity - number (0-1): fill with series color at specified opacity
fillColor?string | SeriesGradient | undefinedBand fill color - solid color string or gradient object. Overrides the fill opacity if specified
lowerBorderColor?string | undefinedOverride color for the lower boundary
upperBorderColor?string | undefinedOverride color for the upper boundary

BarOptions

Bar/column-specific visual options

Import @sixtyfold/lineinterface

interface BarOptions
MemberDefinitionDescription
baseline?number | undefined
= 0		Data value that bars grow from
borderColor?string | undefinedShared bar border color (defaults to series color when a border is enabled)
borderStyle?BarBorderStyle | undefined
= solid		Border line style
borderWidth?number | undefinedBorder width in pixels. Set to 0 to disable borders.
fill?number | boolean | undefinedFill the bars. - false: no bar fill - true: fill with series color at default opacity - number (0-1): fill with series color at specified opacity
fillColor?string | SeriesGradient | undefinedBar fill color - solid color string or gradient object. Overrides the fill opacity if specified
maxWidth?number | undefined
= 24		Maximum bar width in pixels
minWidth?number | undefined
= 1		Minimum bar width in pixels
widthRatio?number | undefined
= 0.7		Fraction of the available sample spacing used by each bar

LegendLabelFontOptions

Options for legend label font.

Import @sixtyfold/lineinterface

interface LegendLabelFontOptions
MemberDefinitionDescription
color?string | undefined
= #cfd6e6		Font color
family?string | undefined
= DEFAULT_CHART_FONT_FAMILY		Font family
size?number | undefined
= 12		Font size in px
style?"normal" | "italic" | "oblique" | undefined
= normal		Font style
weight?string | number | undefined
= normal		Font weight
width?number | undefined
= auto		Max label text width in px

LegendOptions

Placement, layout, typography, swatches, and interaction for the built-in Canvas2D legend.

Import @sixtyfold/lineinterface

interface LegendOptions
MemberDefinitionDescription
align?LegendAlign | undefined
= center		Alignment in the legend area
allowHideAll?boolean | undefined
= false		Allow hiding all series
inactiveOpacity?number | undefined
= 0.45		Opacity for hidden series legend items
interactive?boolean | undefined
= false		Enable click-to-toggle interaction
itemGap?number | undefined
= 12		Gap between items in px
labelFont?LegendLabelFontOptions | undefinedLegend label font style
layout?LegendLayout | undefined
= column		Item layout
padding?{ top?: number; right?: number; bottom?: number; left?: number; } | undefined
= 8		Padding inside legend area in px
position?LegendPosition | undefined
= right		Legend position around chart area
swatch?LegendSwatchOptions | undefinedSwatch style options
swatchGap?number | undefined
= 6		Gap between swatch and label in px
visible?boolean | undefinedShow the legend. Defaults to true when legend is provided; omitting legend disables it.

LegendSwatchOptions

Options for legend swatch.

Import @sixtyfold/lineinterface

interface LegendSwatchOptions
MemberDefinitionDescription
borderColor?string | undefined
= transparent		Swatch border color
borderWidth?number | undefined
= 0		Swatch border width in px
shape?LegendSwatchShape | undefined
= circle		Swatch shape
size?number | undefined
= 10		Swatch size in px

LineAppearanceOptions

Line chart appearance — base appearance + legend + marker

Import @sixtyfold/lineinterface

interface LineAppearanceOptions extends BaseAppearanceOptions
MemberDefinitionDescription
axis?AxisAppearanceOptions | undefinedRuntime appearance options for axis.
chartBackground?BackgroundOptions | undefinedRuntime appearance options for chart background.
crosshairStyle?CrosshairOptions | undefinedRuntime appearance options for crosshair style.
grid?GridOptions | undefinedRuntime appearance options for grid.
labels?ChartLabels | undefinedRuntime appearance options for labels.
legend?LegendOptions | undefinedRuntime appearance options for legend.
marker?MarkerOptions | undefinedRuntime appearance options for marker.
overlay?OverlayOptions | undefinedRuntime appearance options for overlay.
padding?PaddingOptions | undefinedRuntime appearance options for padding.
rangeSelector?RangeSelectorAppearanceOptions | undefinedRuntime appearance options for range selector.
selection?SelectionOptions | undefinedRuntime appearance options for selection.
textDirection?TextDirection | undefinedRuntime appearance options for text direction.
tooltip?TooltipOptions | undefinedRuntime appearance options for tooltip.

LineChartOptions

Construction, interaction, appearance, series, and LOD options for a line chart.

Import @sixtyfold/lineinterface

interface LineChartOptions
MemberDefinitionDescription
animated?boolean | undefinedAnimate data reveal and viewport/axis transitions. When omitted, animation is enabled unless the browser reports prefers-reduced-motion: reduce.
axis?AxisOptions | undefinedAxis customization (line color and label colors)
chartBackground?BackgroundOptions | undefined
= #16213e		Chart background (covers entire canvas including preview area). Can be a solid color string, gradient definition, or image.
crosshairStyle?CrosshairOptions | undefinedCrosshair lines styling (vertical and horizontal guide lines)
grid?GridOptions | undefinedGrid line customization for main chart
interactive?boolean | undefined
= true		Enable user interactions (pan/zoom/pinch). When false, chart is view-only but still shows crosshair/tooltip on hover.
interpolation?"none" | "linear" | "spline" | undefined
= linear		Interpolation mode for values between data points - 'none': no interpolation, snap to nearest data point - 'linear': linear interpolation between adjacent points - 'spline': Catmull-Rom spline interpolation for smooth curves
keepAliveInterval?number | undefined
= 0 (disabled)		Keep-alive interval in seconds to prevent Safari from releasing GPU resources. Safari aggressively cleans up "unused" canvases, causing blank charts.
keyboardActivation?"focus" | "hover" | undefinedHow keyboard controls become active. - "focus" (default): chart must have DOM focus - "hover": chart under the mouse pointer receives keyboard navigation
keyboardAnnouncements?false | KeyboardAnnouncementMessages | undefinedLocalize keyboard-action announcements for assistive technologies, or set false to disable them. Omitted messages use concise English defaults.
keyboardPanSpeed?number | undefined
= 0.1 (10%)		Keyboard pan speed (arrow keys). Fraction of visible range to pan per keypress.1 (10%)
keyboardZoomSpeed?number | undefined
= 0.1 (10% per keypress)		Keyboard zoom speed (+/- keys). Higher values = faster zoom.1 (10% per keypress)
labels?ChartLabels | undefinedText labels around the chart (title, axis labels)
legend?LegendOptions | undefinedSeries legend options
lod?LineLODOptions | undefinedLevel-of-detail presentation policy.
marker?MarkerOptions | undefinedDefault marker style for hover points (can be overridden per-series)
minViewportRange?number | undefinedSmallest interactive X viewport span, expressed in the same units as the chart's X values. Invalid or non-positive values retain the chart-type default. This construction option is not part of mutable appearance.
overlay?OverlayOptions | undefinedDeclarative overlay primitives rendered above chart content
padding?PaddingOptions | undefined
= { top: 20, right: 80, bottom: 40, left: 80 }		Custom padding in pixels
rangeSelector?RangeSelectorOptions | undefinedRange selector (preview chart) configuration
rendererInitializationTimeout?number | undefined
= 15000		Maximum time in milliseconds allowed for renderer startup. The watchdog starts during chart construction, so it also protects applications that do not await BaseChart.initialize. Set to 0 to disable it.
renderMode?"auto" | "worker" | "main" | undefinedRendering mode selection. - "auto": prefer worker+OffscreenCanvas when supported (default) - "worker": force worker rendering (falls back to main if unsupported) - "main": render on the browser main thread (requires a DOM; useful for fallbacks and tests)
selection?SelectionOptions | undefinedSelection range (drag-to-zoom) styling
series?SeriesOptions[] | undefinedPer-series configuration (colors, fill, gradients)
textDirection?TextDirection | undefined
= inherit		Direction used for Canvas2D text. Use "auto" to infer from the first strong character of each string, or "rtl"/"ltr" to force a chart-wide direction.
tooltip?TooltipOptions | undefinedTooltip (crosshair info box) styling
wheelZoomDirection?"up-in" | "up-out" | undefinedMouse wheel zoom direction. - "up-in" (default): wheel up/backward zooms in, wheel down/forward zooms out - "up-out": wheel up/backward zooms out, wheel down/forward zooms in
wheelZoomSpeed?number | undefined
= 0.1 (10% per wheel tick)		Mouse wheel zoom speed. Higher values = faster zoom.1 (10% per wheel tick)
yDomain?YDomainOptions | undefinedPin either or both edges of the rendered Y domain. Omitted edges continue to auto-scale from visible data. Supplying both finite edges keeps the Y viewport stable across zoom, LOD selection, and streaming updates. The option is disabled by default and is construction configuration rather than mutable appearance.

LineChartStatsOptions

Controls how frequently line telemetry is published.

Import @sixtyfold/lineinterface

interface LineChartStatsOptions
MemberDefinitionDescription
intervalMs?number | undefined
= 250		Minimum interval between stats updates in milliseconds

LineDataUpdateOptions

Controls the animated transition used for a bulk line-data replacement.

Import @sixtyfold/lineinterface

interface LineDataUpdateOptions
MemberDefinitionDescription
preservePreviousFrame?boolean | undefinedKeep the previously rendered plot visible ahead of the reveal boundary while an animated replacement dataset is drawn. The default is false. Wait for the previous reveal to finish before using this option; otherwise its partially revealed frame, including any blank remainder, is retained. The retained pixels are static, so pan or zoom during the new reveal can create a temporary grid/data seam until the transition completes.

LineLODOptions

Stable screen-space presentation policy and fidelity/smoothness coefficients.

Import @sixtyfold/lineinterface

interface LineLODOptions
MemberDefinitionDescription
density?number | undefined
= 0.75		Target presentation columns per CSS pixel and the primary fidelity/work control. Higher values retain more local detail and increase rendering work.
mode?"pyramid" | "adaptive" | undefinedadaptive uses stable viewport-aware screen-space presentation where supported. pyramid selects among the prebuilt global LOD levels.
quantizationStep?number | undefined
= 0.25		Additive grid interval inside each binary octave. Smaller values make closer grid widths available and reduce texture jumps at higher query cost. For smooth transitions, pair this with a similar rebase scale (for example 0.1 with 1.1–1.12).
rebaseRatio?number | undefined
= 1.25		Maximum projected column-width drift before the sticky grid rebases. The lower bound is its reciprocal. Lower values produce smaller, more frequent representation changes.

MarkerGlowOptions

Optional glow effect for hover markers

Import @sixtyfold/lineinterface

interface MarkerGlowOptions
MemberDefinitionDescription
blur?number | undefined
= 12		Glow blur radius in pixels
color?string | undefinedGlow color (defaults to marker fill/series color)
opacity?number | undefined
= 0.45		Glow opacity 0-1

MarkerOptions

Marker options for hover point indicators

Import @sixtyfold/lineinterface

interface MarkerOptions
MemberDefinitionDescription
borderColor?string | undefined
= #fff		Border/stroke color
borderWidth?number | undefined
= 1		Border/stroke width in pixels
glow?boolean | MarkerGlowOptions | undefinedOptional glow around the marker
shape?MarkerShape | undefined
= circle		Marker shape
size?number | undefined
= 5		Marker size in pixels — radius for circle, half-width for others

PointOptions

Scatter/points-specific visual options

Import @sixtyfold/lineinterface

interface PointOptions
MemberDefinitionDescription
borderColor?string | undefined
= #fff		Point border/stroke color
borderWidth?number | undefined
= 0		Point border/stroke width in pixels
color?string | undefinedPoint fill color (defaults to series color)
opacity?number | undefined
= 1		Point opacity 0-1
shape?MarkerShape | undefined
= circle		Point shape
size?number | undefined
= 3		Point size in pixels — radius for circle, half-width for others

SeriesAppearanceOptions

Per-series appearance fields — visual + presentation only

Import @sixtyfold/linetype

type SeriesAppearanceOptions = Pick<SeriesOptions, "type" | "color" | "fill" | "fillColor" | "fillToZero" | "fillEffect" | "band" | "bar" | "stack" | "point" | "width" | "name" | "unit" | "marker">
MemberDefinitionDescription
band?BandOptions | undefinedRange/band-specific fill and border styling
bar?BarOptions | undefinedBar/column-specific fill, border, width, and baseline styling
color?string | undefinedLine color (falls back to default palette if not specified)
fill?number | boolean | undefinedFill the area under the line. - false: no fill (default) - true: fill with line color at 40% opacity - number (0-1): fill with line color at specified opacity
fillColor?string | SeriesGradient | undefinedFill color - solid color string or gradient object. Overrides the fill opacity if specified
fillEffect?"none" | "glow" | "layered" | undefinedFill style effect - 'none': flat color fill (default) - 'glow': soft glow emanating from the line - 'layered': stacked fills with varying opacity for depth
fillToZero?boolean | undefined
= true		Fill to zero baseline instead of chart bottom When true: positive values fill down to zero, negative fill up to zero When false: always fill to chart bottom
marker?MarkerOptions | undefinedMarker style for this series' hover point (overrides chart-level marker)
name?string | undefinedSeries display name (used in legend and tooltip).
point?PointOptions | undefinedScatter/points-specific marker styling
stack?StackOptions | undefinedStacked-area-specific fill and top-boundary styling
type?LineSeriesType | undefined
= line		Series drawing style. "step" is an alias for "step-after"; "band" is an alias for "range"; "points" is an alias for "scatter"; "column" is an alias for "bar"; "stackedArea" is an alias for "stacked-area".
unit?UnitOptions | undefinedUnit configuration for this series (used in tooltip and axis labels)
width?number | undefined
= 1.5		Line stroke width in pixels. Set to 0 to suppress the stroke while retaining range fills, tooltips, and other series layers.

SeriesGradient

Gradient definition for series fill

Import @sixtyfold/lineinterface

interface SeriesGradient
MemberDefinitionDescription
colorsstring[]CSS color stops (minimum 2); invalid colors are skipped.
direction?"vertical" | "horizontal" | undefined
= vertical		Gradient direction
offsets?number[] | undefinedOptional offset positions for each color (0-1), defaults to evenly distributed

SeriesOptions

Configuration for a single series

Import @sixtyfold/lineinterface

interface SeriesOptions
MemberDefinitionDescription
band?BandOptions | undefinedRange/band-specific fill and border styling
bar?BarOptions | undefinedBar/column-specific fill, border, width, and baseline styling
color?string | undefinedLine color (falls back to default palette if not specified)
fill?number | boolean | undefinedFill the area under the line. - false: no fill (default) - true: fill with line color at 40% opacity - number (0-1): fill with line color at specified opacity
fillColor?string | SeriesGradient | undefinedFill color - solid color string or gradient object. Overrides the fill opacity if specified
fillEffect?"none" | "glow" | "layered" | undefinedFill style effect - 'none': flat color fill (default) - 'glow': soft glow emanating from the line - 'layered': stacked fills with varying opacity for depth
fillToZero?boolean | undefined
= true		Fill to zero baseline instead of chart bottom When true: positive values fill down to zero, negative fill up to zero When false: always fill to chart bottom
marker?MarkerOptions | undefinedMarker style for this series' hover point (overrides chart-level marker)
name?string | undefinedSeries display name (used in legend and tooltip).
point?PointOptions | undefinedScatter/points-specific marker styling
stack?StackOptions | undefinedStacked-area-specific fill and top-boundary styling
type?LineSeriesType | undefined
= line		Series drawing style. "step" is an alias for "step-after"; "band" is an alias for "range"; "points" is an alias for "scatter"; "column" is an alias for "bar"; "stackedArea" is an alias for "stacked-area".
unit?UnitOptions | undefinedUnit configuration for this series (used in tooltip and axis labels)
width?number | undefined
= 1.5		Line stroke width in pixels. Set to 0 to suppress the stroke while retaining range fills, tooltips, and other series layers.

StackOptions

Stacked-area-specific visual options

Import @sixtyfold/lineinterface

interface StackOptions
MemberDefinitionDescription
borderColor?string | undefinedTop boundary color (defaults to series color)
borderStyle?StackBorderStyle | undefined
= solid		Top boundary line style
borderWidth?number | undefinedTop boundary width in pixels (defaults to series width). Set to 0 to disable.
curve?StackCurveStyle | undefined
= linear		Boundary shape for the filled band and top border.
fill?number | boolean | undefinedFill the stacked area. - false: no area fill - true: fill with series color at default opacity - number (0-1): fill with series color at specified opacity
fillColor?string | SeriesGradient | undefinedArea fill color - solid color string or gradient object. Overrides the fill opacity if specified