Gráficas

Highlighted bar chart

Highlighted bar chart: Un gráfico de barras de categorías donde una barra se destaca con un contorno discontinuo y un relleno más claro, y la leyenda sigue a la barra a la que apunte.

Sessions by channel

Sep 1 – Sep 7

DirectSearchSocialEmailReferral

Search overtook Direct as the top channel this week.

Cómo usar Highlighted bar chart

Highlighted bar chart se presenta con el formato de vista previa «ancho» y el tema «claro/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.

Control	Tipo	Valor inicial	Límites de la vista previa
`accentColor`	`color`	`#FF6A1F`	Los metadatos no indican otro límite.
`activeIndex`	`number`	`1`	De 0 a 4; paso 1
`barRadius`	`number`	`8`	De 0 a 16; paso 1
`showValues`	`boolean`	`false`	Los metadatos no indican otro límite.
`animate`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Highlighted bar chart?

Highlighted bar 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 Highlighted bar chart?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Highlighted bar chart?

El código React de Highlighted bar chart incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-label, aria-pressed, onKeyDown); comparaciones de teclas (ArrowLeft, ArrowRight). 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 Highlighted bar chart el movimiento reducido?

Highlighted bar chart consulta la preferencia de movimiento en su código React mediante useReducedMotion(). 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

Imagen fija del componente Forecast tail line de Fieldbook, de la categoría Gráficas.

1859Forecast tail lineGráficasUna continuación discontinua que lleva una serie más allá de su último punto real hasta un horizonte, alargándose y aterrizando en un marcador hueco.

Imagen fija del componente Inline labeled bar chart de Fieldbook, de la categoría Gráficas.

2278Inline labeled bar chartGráficasUn gráfico de barras horizontales con el nombre de la categoría impreso dentro de cada barra y el valor impreso justo después de su punta, por lo que no se necesita ninguna columna de eje.

Imagen fija del componente Metric switch bar chart de Fieldbook, de la categoría Gráficas.

2280Metric switch bar chartGráficasUn gráfico de barras diario denso con dos mosaicos métricos en el encabezado; Al hacer clic en un mosaico, las barras se transforman en esa métrica.

Imagen fija del componente Named point line de Fieldbook, de la categoría Gráficas.

2291Named point lineGráficasUna línea que atraviesa cinco categorías que imprime el nombre de cada categoría encima de su punto en lugar de un número, dejando el valor en la lectura al pasar el cursor.

Imagen fija del componente Paired bar chart de Fieldbook, de la categoría Gráficas.

2281Paired bar chartGráficasUn gráfico de barras agrupadas donde cada mes muestra dos barras una al lado de la otra, una por serie, para comparar dos medidas en las mismas categorías.

Imagen fija del componente Signed value bar chart de Fieldbook, de la categoría Gráficas.

2284Signed value bar chartGráficasUn gráfico de barras mensual centrado en una línea cero, con barras que suben en un color y bajan en otro según su signo.