Vista previa#
Tooltip rico, único cliente. Demo completa con datos realistas, renderizada en el servidor. Más abajo están las configuraciones, una por una.
Ejemplos#
Todas las configuraciones del componente, cada una viva y con datos propios. Cambia entre Preview y Code en cada tarjeta y copia lo que necesites.
Uso#
Ejemplo mínimo con las props requeridas. Copia, pega y cambia los datos:
import { BarChart, ChartTooltipPortal } from "@carlos-burelo/klin";
import "@carlos-burelo/klin/styles.css";
<ChartTooltipPortal>
<BarChart
/>
</ChartTooltipPortal>SSR-first
La gráfica es función pura de props a SVG: el HTML llega renderizado y sin JS se ve completa.
Envuelve en ChartTooltipPortal solo si quieres tooltip rico; sin JS queda \<title\> nativo.
Lee la guía /docs/ssr-first una vez y listo.
Código de esta demo#
Ver fuente (src/demos/tooltip-portal.tsx)
import type { ChartSeries } from "@carlos-burelo/klin";
import { BarChart, ChartTooltipPortal } from "@carlos-burelo/klin";
const data: Array<Record<string, string | number>> = [
{ dia: "Lun", asistentes: 84 },
{ dia: "Mar", asistentes: 112 },
{ dia: "Mié", asistentes: 96 },
{ dia: "Jue", asistentes: 130 },
];
const series: ChartSeries[] = [{ key: "asistentes", label: "Asistentes" }];
export default function TooltipPortalDemo() {
return (
<div>
<ChartTooltipPortal>
<BarChart
data={data}
xKey="dia"
series={series}
ariaLabel="Asistencia al módulo de trámites de lunes a jueves"
/>
</ChartTooltipPortal>
<p>
Al pasar el cursor sobre cada barra aparece el tooltip del portal; sin
JavaScript el navegador muestra el título nativo de la forma.
</p>
</div>
);
}Props#
Props: ver tipo en tooltip-portal.tsx (fuente).
Accesibilidad#
- Toda gráfica exige
ariaLabeldescriptivo; el SVG usarole="img"con\<title\>. - Cada forma lleva
\<title\>nativo (tooltip sin JS) ydata-chart-tippara el portal rico. - Sin datos se renderiza estado vacío homogéneo (
ChartEmpty), nunca SVG roto. - Detalle del contrato en /docs/accesibilidad.
Recursos#
- Fuente del componente:
tooltip-portal.tsx - Guías: SSR-first · Tema · Tooltip