Catálogo · Gráficos
Barra apilada
Muestra las partes de un todo en una sola barra, con una leyenda que dice cada nombre y cada cifra en texto.
Encaja mejor en: app — una página que muestra cómo se reparte un todo: estados, orígenes, un presupuesto
Ejemplo
Cómo acabaron los paquetes de esta semana: la barra muestra las partes y la leyenda las dice.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
import "@luz-ds/catalog/components/stacked-bar.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stacked-bar.min.css" integrity="sha384-EawyC0MeY43Ls6Vyna5Wo6tQtAJbKY4vu6C6J930w4veLj3B1yFokJZyIu5APjrV" crossorigin="anonymous">Una hoja de estilos de @luz-ds/catalog: enlaza components/stacked-bar.css después de luz.css.
<figure class="luz-stacked-bar">
<figcaption>Parcels by status, this week</figcaption>
<div class="luz-stacked-bar__bar" aria-hidden="true">
<span class="luz-stacked-bar__part" style="--v: 62"></span>
<span class="luz-stacked-bar__part" style="--v: 28"></span>
<span class="luz-stacked-bar__part" style="--v: 10"></span>
</div>
<ul class="luz-stacked-bar__legend">
<li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">Delivered</span> <span class="luz-stacked-bar__figure">62 %</span></li>
<li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">In transit</span> <span class="luz-stacked-bar__figure">28 %</span></li>
<li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">Delayed</span> <span class="luz-stacked-bar__figure">10 %</span></li>
</ul>
</figure>Variantes y opciones
| Opción | Efecto |
|---|---|
--v | En cada parte, su peso: la barra siempre llena su ancho y cada parte toma su --v de la suma, de modo que 62, 21 y 9 sirven igual que .62, .21 y .09 |
--luz-stacked-bar-color | Otro color de gráfico para una parte y su elemento, como var(--luz-chart-4) |
--luz-stacked-bar-h | La altura de la barra |
Cómo funciona
Una figura con dos listas de las mismas partes en el mismo orden. La leyenda son los datos: un nombre y una cifra en texto por parte, con una muestra de su color. La barra es un dibujo de ella, una fila de partes que se reparten el ancho en proporción a su --v, con la superficie asomando por un hueco fino entre ellas.
Las series toman de --luz-chart-1 a --luz-chart-6 en el orden del marcado, así que hasta seis partes conservan su propio color. Pon la mayor primero y agrupa las más pequeñas como «Otros». El style en línea solo da --v. Con un style-src estricto, ponlo en una regla propia.
Sin JavaScript
No lo necesita. Sin la hoja de estilos la figura se lee como su título y la leyenda, una lista de nombres y cifras; la barra queda vacía.
Teclado y ARIA
Nada recibe el foco. El título y la leyenda son texto: oculta la barra con aria-hidden="true", como en el ejemplo.
En colores forzados las partes y las muestras de la leyenda llevan el mismo número, así que se empareja cada parte con su elemento por el número. Puede que el número no quepa en una parte muy estrecha; la leyenda sigue el mismo orden que la barra.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Úsala para mostrar cómo se reparte un todo, cuando las partes suman un total: estados, orígenes, partes de un presupuesto.
Cuándo no usarlo
No la uses para comparar muchos valores (usa una lista de barras o un gráfico de columnas), para más de seis partes ni para una sola (usa un medidor).
Qué hacer y qué no
Cómo escribir el contenido
Indica el todo y el periodo en el título de la figura («Paquetes por estado, esta semana»), mantén cada nombre en una o dos palabras y escribe cada cifra con su unidad. Los datos y las etiquetas son tuyos: el componente solo los dibuja.
Contraste y foco
Cada serie es un color de gráfico sobre la superficie; las seis también se distinguen entre sí por tono y luminosidad, comprobado en cada modo.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Serie 1 sobre la página | --luz-chart-1 on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 3:1 |
Serie 2 sobre la página | --luz-chart-2 on --luz-surface-page | 5.3:1 | 8.9:1 | 9.3:1 | 3:1 |
Serie 3 sobre la página | --luz-chart-3 on --luz-surface-page | 9.6:1 | 10.6:1 | 10.9:1 | 3:1 |
Serie 4 sobre la página | --luz-chart-4 on --luz-surface-page | 9.8:1 | 6.1:1 | 6.6:1 | 3:1 |
Serie 5 sobre la página | --luz-chart-5 on --luz-surface-page | 3.9:1 | 5.0:1 | 6.2:1 | 3:1 |
Serie 6 sobre la página | --luz-chart-6 on --luz-surface-page | 3.7:1 | 5.4:1 | 14.7:1 | 3:1 |
Serie 1 sobre una tarjeta | --luz-chart-1 on --luz-surface | 5.9:1 | 7.2:1 | 14.1:1 | 3:1 |
Nombre | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Cifra | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos; una parte decorativa discreta mantiene 2:1 con aquello sobre lo que se dibuja.
- Foco: nada lo recibe.
- No solo color: cada parte tiene su nombre y su cifra en texto, un hueco separa las partes y, en colores forzados, cada parte y su elemento muestran el mismo número.
Tokens que usa
Los 17 tokens que lee components/stacked-bar.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Color
--luz-chart-1,--luz-chart-2,--luz-chart-3,--luz-chart-4,--luz-chart-5,--luz-chart-6,--luz-text-secondary- Spacing and sizing
--luz-space-2xs,--luz-space-3xs,--luz-space-md,--luz-space-sm,--luz-space-xs- Typography
--luz-font-mono,--luz-font-sans,--luz-text-sm,--luz-text-xs- Radius
--luz-radius-sm
El teclado y ARIA están en la pestaña Código.