# Gráfico de columnas Compara unos pocos valores como columnas de una misma escala de altura, dibujadas desde una tabla nativa que conserva cada cifra como texto. ### Problemas conocidos No se conocen problemas. ### Copiar el marcado Una hoja de estilos de `@luz-ds/catalog`: enlaza `components/column-chart.css` después de `luz.css`. Column chart markup ```html

Parcels per day, this week
Mon	Tue	Wed	Thu
1,204	830	901	1,420

``` Con varias series, sin script: una fila por categoría, su nombre en un ``, y una celda por serie, hasta seis. La fila de encabezado da nombre a las series. Las filas se disponen una junto a otra, y algunos navegadores (Safari con VoiceOver) dejan entonces de distinguir la tabla de un montón de cajas: escribe sus roles, como aquí. `` los escribe por ti. Marcado del gráfico de columnas con varias series ```html

Visitors per month, by device, January and February
Month	Desktop	Mobile
Jan	186	80
Feb	305	200

``` Interactivo, con la cabecera de las series: enlaza también `components/chart.css` y carga `catalog.js`, que carga `chart.js` cuando la página tiene un ``. Una fila por día, su nombre en un ``, y una columna por serie. La tabla no lleva clase: el script le da `luz-column-chart` cuando la dibuja, así que sin el script cabe en cualquier ancho. Marcado del gráfico de columnas interactivo ```html

Visitors per day, April 1 to 3
Day	Desktop	Mobile
Apr 1	252	148
Apr 2	271	276
Apr 3	182	128

``` ### Variantes y opciones - `--v`: En cada celda, de 0 a 1: su valor entre el máximo de la escala, el mismo para todas las columnas - `--luz-column-chart-color`: Otro color de gráfico para una tabla o una celda, como `var(--luz-chart-2)` - `--luz-column-chart-h`: La altura de las columnas - `--luz-column-chart-bar`: El ancho de una columna, `var(--luz-space-lg)` por defecto; nunca mayor que su parte de la tabla - Una fila por categoría: Varias series: un `` y después una celda por serie en cada fila, hasta seis. Cada fila es un grupo de columnas, la serie n en `--luz-chart-n`, con su nombre debajo, y la fila de encabezado es la leyenda - `--luz-column-chart-gap`: En el gráfico de varias series solo con CSS, el espacio entre las columnas de un grupo, `var(--luz-space-xs)` por defecto; los grupos se reparten el espacio que queda. `` reparte el ancho entre sus días y no tiene separación que definir - ``: Alrededor de una tabla de varias series sin clase: el script la dibuja como columnas, con un botón por serie y su total, que apaga y enciende sus columnas, y una lectura del día bajo el puntero o el foco ### Cómo funciona Una tabla con una fila de encabezado de nombres y una fila de cifras. Cada cifra es el texto de su celda, y la celda dibuja su columna debajo, desde la base hasta `--v`, en `--luz-chart-1`, con la pista en `--luz-chart-track`. Las columnas se reparten el ancho por igual. Calcula `--v` como el valor entre el máximo de la escala, el mismo para todas las celdas. El `style` en línea solo da ese valor. Con un `style-src` estricto, ponlo en una regla propia, como `.sat { --v: .25 }`. Con el tamaño de texto por defecto, hasta siete columnas, o tres grupos de dos, caben en una pantalla de 320 px. Si hay más, o con un texto mayor, mete la tabla en un `luz-table-wrap`: se desplaza dentro de él. La cifra de cada celda está sobre su columna y el nombre debajo, como en un eje. Con varias series, cada fila es un grupo de columnas, separadas por `--luz-column-chart-gap` (en el gráfico solo con CSS), y la fila de encabezado es la leyenda: el nombre de cada serie tras un punto de su color. Dentro de ``, el script añade una cabecera sobre la tabla: un botón por serie, su nombre y la suma de sus cifras, escrita con el idioma de la página. Una suma sirve para recuentos e importes, como visitantes o euros; no sirve para tasas, proporciones ni medias, cuyo total no dice nada: no uses `interactive` para ellas, o déjalas fuera. El título de la tabla pasa a ser el título del gráfico. Las columnas pierden su pista: el día bajo el puntero o el foco recibe una banda clara, y las cifras salen de las columnas a una lectura a su lado. Las columnas conservan la escala de su `--v` cuando se apaga una serie, y la última serie mostrada no se puede apagar. El script no escribe ninguna palabra propia: los nombres, las cifras y el título son tuyos. ### Sin JavaScript No lo necesita. Sin la hoja de estilos se lee como una tabla: una fila de encabezado con los nombres y luego las cifras. El gráfico interactivo es, sin su script, una tabla simple: una fila por día con todas sus cifras, que cabe en la pantalla más estrecha. Una tabla de pocas categorías que deba ser de columnas sin script lleva ella misma la clase `luz-column-chart`. ### Teclado y ARIA El gráfico simple no recibe el foco. Una tabla conserva sus roles, así que un lector de pantalla lee cada cifra con su nombre. El título de la tabla la nombra e indica la unidad. Con varias series las filas se disponen una junto a otra: escribe los roles de la tabla en su marcado, como hace el fragmento, para que Safari con VoiceOver siga leyendo una tabla. El gráfico interactivo es un grupo con el nombre del título, y el script escribe los roles de su tabla (`table`, `rowgroup`, `row`, `columnheader`, `rowheader` y `cell`). Sus botones son botones de alternancia (`aria-pressed`): Enter o Espacio apagan y encienden una serie, y la última serie mostrada sigue encendida. Sus filas reciben el foco, en una sola parada de Tab, y cada fila se nombra con sus propias celdas, a partir de tu texto: «Apr 1, Desktop 252, Mobile 148», con todas las series, mostradas o no. Las flechas pasan al día siguiente o al anterior (izquierda y derecha siguen la dirección de la página), e Inicio y Fin al primero y al último, cuando el foco está en una fila; las teclas del modo de exploración de un lector de pantalla, son suyas. La lectura tiene el nombre del día como título, así que la banda nunca es la única señal de dónde estás; está oculta para la tecnología de asistencia. Escape la guarda sin mover el puntero ni el foco (vuelve en otro día). Una serie apagada pierde sus columnas pero conserva sus celdas en la tabla, así que un lector de pantalla sigue leyendo todas las cifras. No ocultes la tabla: son los datos. Las columnas son un dibujo de ella y no llevan texto propio. ### Cuándo usarlo Úsalo para comparar unos pocos valores que tienen un orden o un nombre, como los días de una semana o los meses de un año, en una misma escala. Con varias series, compara unas pocas series categoría a categoría, como dos dispositivos mes a mes. Usa el gráfico interactivo para dos o más series a lo largo de muchos días, cuando importan los totales y cada día se lee de uno en uno. ### Cuándo no usarlo No uses el gráfico interactivo cuando haya que ver todas las cifras a la vez: sus cifras están en la lectura, ni para tasas, proporciones ni medias: el total de una serie es una suma. No lo uses para un solo valor (usa un [medidor](https://nandovejer.github.io/luz/es/docs/components/meter/)), para nombres largos (usa una [lista de barras](https://nandovejer.github.io/luz/es/docs/catalog/bar-list/)) ni para una tendencia de muchos puntos. Conserva una [tabla](https://nandovejer.github.io/luz/es/docs/components/table/) cuando importen más los valores exactos.