Chart Legend

Vista previa#

Leyenda HTML SSR. 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 { ChartLegend } from "@carlos-burelo/klin";
import "@carlos-burelo/klin/styles.css";
 
<ChartLegend
  items={/* … */}
/>

Código de esta demo#

import type { LegendItem } from "@carlos-burelo/klin";
import { ChartLegend } from "@carlos-burelo/klin";
 
const items: LegendItem[] = [
  { label: "Tienda física", color: "var(--chart-1)" },
  { label: "En línea", color: "var(--chart-2)" },
  { label: "Mayoreo", color: "var(--chart-3)" },
  { label: "Exportación", color: "var(--chart-4)" },
];
 
export default function ChartLegendDemo() {
  return <ChartLegend items={items} />;
}

Props#

Tipo completo: ChartLegendProps en legend.tsx.

Accesibilidad#

• Toda gráfica exige ariaLabel descriptivo; el SVG usa role="img" con \<title\>.
• Cada forma lleva \<title\> nativo (tooltip sin JS) y data-chart-tip para 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: legend.tsx
• Guías: SSR-first · Tema · Tooltip