Saltar al contenido
Menú

Gráficas

Profit/Loss Line Chart

Profit/Loss Line Chart: Un gráfico de líneas cuyo trazo cambia de color dependiendo de si el valor está por encima o por debajo de cero, dividiéndose limpiamente en cada punto de cruce.

Cómo usar Profit/Loss Line Chart

Profit/Loss Line Chart se presenta con el formato de vista previa «ancho» y el tema «oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

ControlTipoValor inicialLímites de la vista previa
positiveColorcolor#34D399Los metadatos no indican otro límite.
negativeColorcolor#F87171Los metadatos no indican otro límite.
strokeWidthnumber3De 1 a 6; paso 0.5
smoothbooleanfalseLos metadatos no indican otro límite.
¿Para qué frameworks está disponible Profit/Loss Line Chart?

Profit/Loss Line Chart está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Profit/Loss Line Chart?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx, tailwind-merge.

¿Qué detalles de accesibilidad se observan en Profit/Loss Line Chart?

El código React de Profit/Loss Line Chart incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-label, onKeyDown, tabIndex); roles explícitos (img); comparaciones de teclas (ArrowLeft, ArrowRight, Escape). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Profit/Loss Line Chart el movimiento reducido?

Profit/Loss Line Chart consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: delay: reduce ? 0 : i * 0.06; duration: reduce ? 0 : 0.7. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados