Opciones de gráfico de líneas

Importar

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

Usa el punto de entrada público indicado arriba. Las importaciones solo de tipos se eliminan del JavaScript de la aplicación.

`BandOptions`

Opciones visuales específicas por rango/banda

Importar @sixtyfold/lineinterfaz

interface BandOptions

Miembro	Definición	Descripción
`borderColor?`	`string \| undefined`	Color compartido del borde para los límites superior e inferior (por defecto, el color de la serie cuando se habilita un borde)
`borderStyle?`	`BandBorderStyle \| undefined` = `solid`	Estilo de la línea del borde
`borderWidth?`	`number \| undefined`	Ancho del borde en píxeles. Establécelo en 0 para desactivar los bordes.
`fill?`	`number \| boolean \| undefined`	Rellenar la banda. - false: sin relleno de banda - true: rellenar con el color de la serie a opacidad por defecto - número (0-1): rellenar con el color de la serie a la opacidad indicada
`fillColor?`	`string \| SeriesGradient \| undefined`	Color de relleno de la banda: cadena de color sólida u objeto gradiente. Sobrescribe la opacidad de relleno si se especifica
`lowerBorderColor?`	`string \| undefined`	Anular el color del límite inferior
`upperBorderColor?`	`string \| undefined`	Anular color para el límite superior

`BarOptions`

Opciones visuales específicas de barra/columna

Importar @sixtyfold/lineinterfaz

interface BarOptions

Miembro	Definición	Descripción
`baseline?`	`number \| undefined` = `0`	Valor de dato desde el que crecen las barras
`borderColor?`	`string \| undefined`	Color compartido del borde de las barras (por defecto usa el color de la serie cuando el borde está habilitado)
`borderStyle?`	`BarBorderStyle \| undefined` = `solid`	Estilo de línea del borde
`borderWidth?`	`number \| undefined`	Ancho del borde en píxeles. Poner 0 para deshabilitar los bordes.
`fill?`	`number \| boolean \| undefined`	Rellenar las barras. - false: sin relleno de barra - true: rellenar con el color de la serie y opacidad por defecto - número (0-1): rellenar con el color de la serie y la opacidad especificada
`fillColor?`	`string \| SeriesGradient \| undefined`	Color de relleno de la barra: cadena de color sólida u objeto gradiente. Sobrescribe la opacidad de relleno si se especifica
`maxWidth?`	`number \| undefined` = `24`	Ancho máximo de barra en píxeles
`minWidth?`	`number \| undefined` = `1`	Ancho mínimo de barra en píxeles
`widthRatio?`	`number \| undefined` = `0.7`	Fracción del espaciado de muestra disponible usado por cada barra

`LegendLabelFontOptions`

Opciones para la tipografía de la etiqueta de la leyenda.

Import @sixtyfold/lineinterface

interface LegendLabelFontOptions

Miembro	Definición	Descripción
`color?`	`string \| undefined` = `#cfd6e6`	Color de fuente
`family?`	`string \| undefined` = `DEFAULT_CHART_FONT_FAMILY`	Familia de fuentes
`size?`	`number \| undefined` = `12`	Tamaño de fuente en px
`style?`	`"normal" \| "italic" \| "oblique" \| undefined` = `normal`	Estilo de fuente
`weight?`	`string \| number \| undefined` = `normal`	Peso de fuente
`width?`	`number \| undefined` = `auto`	Ancho máximo de texto de etiqueta en px

`LegendOptions`

Ubicación, diseño, tipografía, muestras y la interacción de la leyenda integrada Canvas2D.

Importar @sixtyfold/lineinterfaz

interface LegendOptions

Member	Definition	Description
`align?`	`LegendAlign \| undefined` = `center`	Alineación en el área de la leyenda
`allowHideAll?`	`boolean \| undefined` = `false`	Permitir ocultar todas las series
`inactiveOpacity?`	`number \| undefined` = `0.45`	Opacidad para elementos de leyenda de series ocultas
`interactive?`	`boolean \| undefined` = `false`	Activar interacción de clic para alternar
`itemGap?`	`number \| undefined` = `12`	Espacio entre elementos en px
`labelFont?`	`LegendLabelFontOptions \| undefined`	Estilo de fuente de la etiqueta de la leyenda
`layout?`	`LegendLayout \| undefined` = `column`	Disposición del elemento
`padding?`	`{ top?: number; right?: number; bottom?: number; left?: number; } \| undefined` = `8`	Relleno dentro del área de la leyenda en px
`position?`	`LegendPosition \| undefined` = `right`	Posición de la leyenda alrededor del área del gráfico
`swatch?`	`LegendSwatchOptions \| undefined`	Opciones de estilo del muestreo (swatch)
`swatchGap?`	`number \| undefined` = `6`	Espacio entre el muestreo y la etiqueta en px
`visible?`	`boolean \| undefined`	Muestra la leyenda. Se activa por defecto cuando se proporciona `legend`; omitir `legend` la desactiva.

`LegendSwatchOptions`

Opciones para el swatch de la leyenda.

Import @sixtyfold/lineinterface

interface LegendSwatchOptions

Miembro	Definición	Descripción
`borderColor?`	`string \| undefined` = `transparent`	Color del borde de la muestra
`borderWidth?`	`number \| undefined` = `0`	Ancho del borde de la muestra en px
`shape?`	`LegendSwatchShape \| undefined` = `circle`	Forma de la muestra
`size?`	`number \| undefined` = `10`	Tamaño de la muestra en px

`LineAppearanceOptions`

Apariencia del gráfico de líneas — apariencia base + leyenda + marcador

Importar @sixtyfold/lineinterfaz

interface LineAppearanceOptions extends BaseAppearanceOptions

Miembro	Definición	Descripción
`axis?`	`AxisAppearanceOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el eje.
`chartBackground?`	`BackgroundOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el fondo del gráfico.
`crosshairStyle?`	`CrosshairOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el estilo de la mira (crosshair).
`grid?`	`GridOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para la cuadrícula.
`labels?`	`ChartLabels \| undefined`	Opciones de apariencia en tiempo de ejecución para las etiquetas.
`legend?`	`LegendOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para la leyenda.
`marker?`	`MarkerOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el marcador.
`overlay?`	`OverlayOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para la superposición.
`padding?`	`PaddingOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el relleno.
`rangeSelector?`	`RangeSelectorAppearanceOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el range selector.
`selection?`	`SelectionOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para la selección.
`textDirection?`	`TextDirection \| undefined`	Opciones de apariencia en tiempo de ejecución para la dirección del texto.
`tooltip?`	`TooltipOptions \| undefined`	Opciones de apariencia en tiempo de ejecución para el tooltip.

`LineChartOptions`

Opciones de construcción, interacción, apariencia, series y LOD para un gráfico de líneas.

Importar @sixtyfold/lineinterfaz

interface LineChartOptions

Miembro	Definición	Descripción
`animated?`	`boolean \| undefined`	Animar la revelación de datos y las transiciones de viewport/ejes. Si se omite, la animación está habilitada salvo que el navegador informe `prefers-reduced-motion: reduce`.
`axis?`	`AxisOptions \| undefined`	Personalización de ejes (color de la línea y colores de las etiquetas)
`chartBackground?`	`BackgroundOptions \| undefined` = `#16213e`	Fondo del gráfico (cubre todo el canvas, incluida el área de vista previa). Puede ser una cadena de color sólido, una definición de degradado o una imagen.
`crosshairStyle?`	`CrosshairOptions \| undefined`	Estilo de las líneas de cruz (líneas guía vertical y horizontal)
`grid?`	`GridOptions \| undefined`	Personalización de líneas de la rejilla para el gráfico principal
`interactive?`	`boolean \| undefined` = `true`	Habilitar interacciones del usuario (pan/zoom/pellizco). Si es false, el gráfico es solo de visualización pero sigue mostrando crosshair/tooltip al pasar el cursor.
`interpolation?`	`"none" \| "linear" \| "spline" \| undefined` = `linear`	Modo de interpolación para valores entre puntos de datos - 'none': sin interpolación, ajusta al punto de datos más cercano - 'linear': interpolación lineal entre puntos adyacentes - 'spline': interpolación spline Catmull‑Rom para curvas suaves
`keepAliveInterval?`	`number \| undefined` = `0 (disabled)`	Intervalo de keep-alive en segundos para evitar que Safari libere recursos GPU. Safari limpia agresivamente los canvases “no usados”, provocando gráficos en blanco.
`keyboardActivation?`	`"focus" \| "hover" \| undefined`	Cómo se activan los controles de teclado. - "focus" (por defecto): el gráfico debe tener el foco DOM - "hover": el gráfico bajo el puntero del ratón recibe la navegación por teclado
`keyboardAnnouncements?`	`false \| KeyboardAnnouncementMessages \| undefined`	Localice los anuncios de acciones del teclado para tecnologías de asistencia, o establezca `false` para desactivarlos. Los mensajes omitidos usan valores predeterminados concisos en inglés.
`keyboardPanSpeed?`	`number \| undefined` = `0.1 (10%)`	Velocidad de desplazamiento con teclado (teclas de flecha). Fracción del rango visible que se desplaza por pulsación.1 (10%)
`keyboardZoomSpeed?`	`number \| undefined` = `0.1 (10% per keypress)`	Velocidad de zoom con teclado (teclas +/-). Valores mayores = zoom más rápido.1 (10% por pulsación)
`labels?`	`ChartLabels \| undefined`	Etiquetas de texto alrededor del gráfico (título, etiquetas de ejes)
`legend?`	`LegendOptions \| undefined`	Opciones de leyenda de la serie
`lod?`	`LineLODOptions \| undefined`	Política de presentación por level of detail.
`marker?`	`MarkerOptions \| undefined`	Estilo de marcador por defecto para puntos al pasar el cursor (puede sobrescribirse por serie)
`minViewportRange?`	`number \| undefined`	Mínimo intervalo de vista X interactivo, expresado en las mismas unidades que los valores X del gráfico. Valores inválidos o no positivos conservan el valor predeterminado según el tipo de gráfico. Esta opción de construcción no forma parte de la apariencia mutable.
`overlay?`	`OverlayOptions \| undefined`	Primitivas de superposición declarativas renderizadas sobre el contenido del gráfico
`padding?`	`PaddingOptions \| undefined` = `{ top: 20, right: 80, bottom: 40, left: 80 }`	Relleno personalizado en píxeles
`rangeSelector?`	`RangeSelectorOptions \| undefined`	Configuración del range selector (gráfico de vista previa)
`rendererInitializationTimeout?`	`number \| undefined` = `15000`	Tiempo máximo en milisegundos permitido para el arranque del renderer. El watchdog comienza durante la construcción del gráfico, por lo que también protege aplicaciones que no esperan `BaseChart.initialize`. Establézcalo en `0` para desactivarlo.
`renderMode?`	`"auto" \| "worker" \| "main" \| undefined`	Selecciona el modo de renderizado. `auto` prefiere Worker + OffscreenCanvas; `worker` fuerza el worker con respaldo en el hilo principal; `main` renderiza en el hilo principal del navegador y requiere DOM.
`selection?`	`SelectionOptions \| undefined`	Estilo del rango de selección (arrastrar-para-zoom)
`series?`	`SeriesOptions[] \| undefined`	Configuración por serie (colores, relleno, degradados)
`textDirection?`	`TextDirection \| undefined` = `inherit`	Dirección usada para el texto Canvas2D. Usar "auto" para inferirla a partir del primer carácter fuerte de cada cadena, o "rtl"/"ltr" para forzar una dirección a nivel de gráfico.
`tooltip?`	`TooltipOptions \| undefined`	Estilo del Tooltip (cuadro de información de la cruz)
`wheelZoomDirection?`	`"up-in" \| "up-out" \| undefined`	Dirección del zoom con la rueda del ratón. - "up-in" (por defecto): rueda arriba/hacia atrás acerca, rueda abajo/hacia delante aleja - "up-out": rueda arriba/hacia atrás aleja, rueda abajo/hacia delante acerca
`wheelZoomSpeed?`	`number \| undefined` = `0.1 (10% per wheel tick)`	Velocidad del zoom con la rueda del ratón. Valores mayores = zoom más rápido.1 (10% por tick de rueda)
`yDomain?`	`YDomainOptions \| undefined`	Fijar uno o ambos extremos del dominio Y renderizado. Los extremos omitidos continúan autoescalando según los datos visibles. Proveer ambos extremos finitos mantiene la vista Y estable durante zoom, selección de LOD y actualizaciones en streaming. La opción está deshabilitada por defecto y es una configuración de construcción en lugar de una apariencia mutable.

`LineChartStatsOptions`

Controla con qué frecuencia se publica la telemetría de línea.

Import @sixtyfold/lineinterface

interface LineChartStatsOptions

Miembro	Definición	Descripción
`intervalMs?`	`number \| undefined` = `250`	Intervalo mínimo entre actualizaciones de estadísticas en milisegundos

`LineDataUpdateOptions`

Controla la transición animada utilizada para un reemplazo masivo de datos de línea.

Import @sixtyfold/lineinterface

interface LineDataUpdateOptions

Miembro	Definición	Descripción
`preservePreviousFrame?`	`boolean \| undefined`	Mantener la trama previamente renderizada visible delante del límite de revelado mientras se dibuja un conjunto de datos de reemplazo animado. El valor por defecto es false. Espere a que el revelado anterior termine antes de usar esta opción; de lo contrario, se retendrá su fotograma parcialmente revelado, incluyendo cualquier resto en blanco. Los píxeles retenidos son estáticos, por lo que al desplazar o hacer zoom durante el nuevo revelado puede aparecer una costura temporal en la cuadrícula/datos hasta que la transición finalice.

`LineLODOptions`

Política de presentación en espacio de pantalla estable y coeficientes de fidelidad/suavidad.

Import @sixtyfold/lineinterface

interface LineLODOptions

Miembro	Definición	Descripción
`density?`	`number \| undefined` = `0.75`	Columnas de presentación objetivo por píxel CSS y el control principal de fidelidad/trabajo. Valores más altos conservan más detalle local y aumentan la carga de renderizado.
`mode?`	`"pyramid" \| "adaptive" \| undefined`	`adaptive` utiliza una presentación en espacio de pantalla consciente del viewport y estable cuando está soportada. `pyramid` selecciona entre los niveles globales preconstruidos de LOD.
`quantizationStep?`	`number \| undefined` = `0.25`	Intervalo aditivo de cuadrícula dentro de cada octava binaria. Valores menores permiten anchos de cuadrícula más próximos y reducen los saltos de textura a costa de más consultas. Para transiciones suaves, emparejar esto con una escala de rebase similar (por ejemplo 0.1 con 1.1–1.12).
`rebaseRatio?`	`number \| undefined` = `1.25`	Deriva máxima proyectada del ancho de columna antes de que la cuadrícula fija se vuelva a base. El límite inferior es su recíproco. Valores más bajos producen cambios de representación más pequeños y frecuentes.

`MarkerGlowOptions`

Efecto de resplandor opcional para marcadores en hover

Import @sixtyfold/lineinterface

interface MarkerGlowOptions

Miembro	Definición	Descripción
`blur?`	`number \| undefined` = `12`	Radio de desenfoque del resplandor en píxeles
`color?`	`string \| undefined`	Color del resplandor (por defecto, relleno del marcador/color de la serie)
`opacity?`	`number \| undefined` = `0.45`	Opacidad del resplandor 0-1

`MarkerOptions`

Opciones del marcador para los indicadores del punto en hover

Importar @sixtyfold/lineinterfaz

interface MarkerOptions

Miembro	Definición	Descripción
`borderColor?`	`string \| undefined` = `#fff`	Color del borde/trazo
`borderWidth?`	`number \| undefined` = `1`	Grosor del borde/trazo en píxeles
`glow?`	`boolean \| MarkerGlowOptions \| undefined`	Resplandor opcional alrededor del marcador
`shape?`	`MarkerShape \| undefined` = `circle`	Forma del marcador
`size?`	`number \| undefined` = `5`	Tamaño del marcador en píxeles — radio para círculo, semiancho para otros

`PointOptions`

Opciones visuales específicas para scatter/puntos

Import @sixtyfold/lineinterface

interface PointOptions

Miembro	Definición	Descripción
`borderColor?`	`string \| undefined` = `#fff`	Color del borde/trazo del punto
`borderWidth?`	`number \| undefined` = `0`	Grosor del borde/trazo del punto en píxeles
`color?`	`string \| undefined`	Color de relleno del punto (por defecto, el color de la serie)
`opacity?`	`number \| undefined` = `1`	Opacidad del punto 0-1
`shape?`	`MarkerShape \| undefined` = `circle`	Forma del punto
`size?`	`number \| undefined` = `3`	Tamaño del punto en píxeles — radio para círculo, semiancho para los demás

`SeriesAppearanceOptions`

Apariencia por serie — solo visual y de presentación

Importar @sixtyfold/linetipo

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

Miembro	Definición	Descripción
`band?`	`BandOptions \| undefined`	Estilado de relleno y borde específico por rango/banda
`bar?`	`BarOptions \| undefined`	Estilado de relleno, borde, ancho y línea base específico de barra/columna
`color?`	`string \| undefined`	Color de línea (usa la paleta predeterminada si no se especifica)
`fill?`	`number \| boolean \| undefined`	Rellenar el área bajo la línea. - false: sin relleno (por defecto) - true: rellenar con el color de la línea al 40% de opacidad - número (0-1): rellenar con el color de la línea con la opacidad especificada
`fillColor?`	`string \| SeriesGradient \| undefined`	Color de relleno: cadena de color sólida u objeto gradiente. Se sobrepone a la opacidad de relleno si se especifica
`fillEffect?`	`"none" \| "glow" \| "layered" \| undefined`	Efecto de estilo de relleno - 'none': relleno de color plano (por defecto) - 'glow': resplandor suave que emana de la línea - 'layered': rellenos apilados con opacidades variables para dar profundidad
`fillToZero?`	`boolean \| undefined` = `true`	Rellenar hasta la línea base cero en lugar del fondo del gráfico Cuando es true: los valores positivos rellenan hacia abajo hasta cero, los negativos rellenan hacia arriba hasta cero Cuando es false: siempre rellenar hasta el fondo del gráfico
`marker?`	`MarkerOptions \| undefined`	Estilo del marcador para el punto de hover de esta serie (anula el marcador a nivel de gráfico)
`name?`	`string \| undefined`	Nombre para mostrar de la serie (usado en la leyenda y en el tooltip).
`point?`	`PointOptions \| undefined`	Estilado del marcador específico para scatter/puntos
`stack?`	`StackOptions \| undefined`	Estilado del relleno y del límite superior específico para áreas apiladas
`type?`	`LineSeriesType \| undefined` = `line`	Estilo de dibujo de la serie. "step" es un alias de "step-after"; "band" es un alias de "range"; "points" es un alias de "scatter"; "column" es un alias de "bar"; "stackedArea" es un alias de "stacked-area".
`unit?`	`UnitOptions \| undefined`	Configuración de unidad para esta serie (usada en tooltip y etiquetas de eje)
`width?`	`number \| undefined` = `1.5`	Grosor del trazo de la línea en píxeles. Ajustar a 0 para suprimir el trazo conservando los rellenos de rango, tooltips y otras capas de la serie.

`SeriesGradient`

Definición de degradado para el relleno de la serie

Importar @sixtyfold/lineinterfaz

interface SeriesGradient

Miembro	Definición	Descripción
`colors`	`string[]`	Paradas de color CSS (mínimo 2); los colores inválidos se omiten.
`direction?`	`"vertical" \| "horizontal" \| undefined` = `vertical`	Dirección del degradado
`offsets?`	`number[] \| undefined`	Posiciones de desplazamiento opcionales para cada color (0-1), por defecto distribuidas uniformemente

`SeriesOptions`

Configuración para una sola serie

Import @sixtyfold/lineinterface

interface SeriesOptions

Miembro	Definición	Descripción
`band?`	`BandOptions \| undefined`	Estilizado de relleno y borde específico por rango/banda
`bar?`	`BarOptions \| undefined`	Estilizado de relleno, borde, ancho y línea base específico para barra/columna
`color?`	`string \| undefined`	Color de la línea (usa la paleta por defecto si no se especifica)
`fill?`	`number \| boolean \| undefined`	Rellenar el área bajo la línea. - false: sin relleno (por defecto) - true: rellenar con el color de la línea al 40% de opacidad - número (0-1): rellenar con el color de la línea a la opacidad especificada
`fillColor?`	`string \| SeriesGradient \| undefined`	Color de relleno: cadena de color sólido u objeto de degradado. Anula la opacidad de relleno si se especifica
`fillEffect?`	`"none" \| "glow" \| "layered" \| undefined`	Efecto de estilo de relleno: 'none': relleno de color plano (por defecto) - 'glow': resplandor suave que emana de la línea - 'layered': rellenos apilados con opacidades variables para dar profundidad
`fillToZero?`	`boolean \| undefined` = `true`	Rellenar hasta la línea base cero en lugar del fondo del gráfico Cuando es true: los valores positivos rellenan hacia abajo hasta cero, los negativos rellenan hacia arriba hasta cero Cuando es false: siempre rellenar hasta el fondo del gráfico
`marker?`	`MarkerOptions \| undefined`	Estilo de marcador para el punto de hover de esta serie (anula el marcador a nivel de gráfico)
`name?`	`string \| undefined`	Nombre de la serie mostrado (usado en la leyenda y en el tooltip).
`point?`	`PointOptions \| undefined`	Estilizado específico de marcadores para scatter/puntos
`stack?`	`StackOptions \| undefined`	Estilizado de relleno y límite superior específico para stacked-area
`type?`	`LineSeriesType \| undefined` = `line`	Estilo de dibujo de la serie. "step" es un alias de "step-after"; "band" es un alias de "range"; "points" es un alias de "scatter"; "column" es un alias de "bar"; "stackedArea" es un alias de "stacked-area".
`unit?`	`UnitOptions \| undefined`	Configuración de unidad para esta serie (usada en el tooltip y las etiquetas de eje)
`width?`	`number \| undefined` = `1.5`	Ancho del trazo de la línea en píxeles. Establecer a 0 para suprimir el trazo conservando los rellenos de rango, tooltips y otras capas de la serie.

`StackOptions`

Opciones visuales específicas para áreas apiladas

Import @sixtyfold/lineinterface

interface StackOptions

Member	Definition	Description
`borderColor?`	`string \| undefined`	Color de límite superior (por defecto el color de la serie)
`borderStyle?`	`StackBorderStyle \| undefined` = `solid`	Estilo de la línea del límite superior
`borderWidth?`	`number \| undefined`	Ancho del límite superior en píxeles (por defecto el ancho de la serie). Fijar a 0 para desactivar.
`curve?`	`StackCurveStyle \| undefined` = `linear`	Forma del límite para la banda rellena y el borde superior.
`fill?`	`number \| boolean \| undefined`	Rellenar el área apilada. - false: sin relleno de área - true: rellenar con el color de la serie a opacidad por defecto - número (0-1): rellenar con el color de la serie a la opacidad especificada
`fillColor?`	`string \| SeriesGradient \| undefined`	Color de relleno del área - cadena de color sólido u objeto gradiente. Anula la opacidad de relleno si está especificada