ComboChart

Barras y líneas en los mismos ejes: montos con una tendencia o una tasa, como ingresos y pedidos.

import { ComboChart } from '@alea/pro';

Ejemplos

Barras y una línea

Montos como barras, la tasa como línea en el mismo eje. Pasa el mouse sobre un elemento de la leyenda para traer su serie al frente.

Revenue and orders

Orders grew every month; revenue dipped in March.

Revenue ($k)
Orders

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-border…
--alea-focus…
--alea-text-muted…

Type

--alea-font-family-body…

Motion

--alea-motion-duration-fast…
--alea-motion-duration-slower…
--alea-motion-ease-out…
--alea-motion-spring…

Props

`ComboChart` props

Barras y líneas en los mismos ejes: montos con una tendencia o una meta (ingresos y margen, visitas y conversión).

Prop	Tipo	Por defecto	Descripción
`bars`obligatoria	`Series[]`	-	Series dibujadas como barras.
`data`obligatoria	`ChartRow[]`	-
`lines`obligatoria	`Series[]`	-	Series dibujadas como líneas encima (mismo eje).
`x`obligatoria	`string`	-	La clave del eje x.
`className`	`string`	-	Clases extra para el elemento raíz.
`description`	`ReactNode`	-	Una oración sobre lo que muestran los datos; se lee antes del gráfico.
`height`	`number`	`280`	Altura del gráfico en px. Por defecto 280.
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showTable`	`boolean`	`true`	Muestra el botón de tabla. Por defecto true.
`title`	`ReactNode`	-	El título que se muestra arriba y que leen los lectores de pantalla.
`valueFormat`	`((v: number) => string)`	-	Da formato a los valores (eje, tooltip, tabla).

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Estados: Keyboard focus
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-chart-svgwrap.alea-chart-svg.alea-chart-grid.alea-chart-axis.alea-chart-bargroup.alea-chart-bar.alea-chart-line
Atributos data: data-dim

El gráfico es una figura con su título como nombre y su descripción; la imagen tiene un resumen en texto.
Tab hasta el gráfico, luego las flechas recorren los datos y se anuncia cada valor; Escape sale.
El botón de tabla muestra los mismos datos como tabla real para quien no puede usar la imagen.

Teclado

Tecla	Acción
`Tab`	Enfoca el gráfico
`Izquierda` o `Flecha derecha`	Valor anterior o siguiente
`Inicio` o `Fin`	Primer o último valor
`Escape`	Borra la selección

Qué hacer y qué evitar

Hacer

Pon la cantidad en barras y la tasa o tendencia en la línea.
Rotula ambos ejes cuando miden cosas distintas.

Evitar

No uses dos ejes para sugerir una relación que los datos no muestran.
No pongas más de dos series de cada tipo.