# Gráficos

> Reglas para barras, líneas y área en una card: colores, ejes, leyenda, tooltip y datos en tabla.

Categoría: Contenido · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Cuando la forma de los datos importa más que el número exacto.
- Si importa el número, una Card de estadísticas o una tabla.
- Siempre con título, leyenda si hay más de una serie, y los datos en tabla.

## Barras

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-full max-w-xl rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><figcaption class="flex flex-wrap items-start justify-between gap-4 mb-6"><div><div class="text-base font-semibold">Visitas</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Enero a junio de 2026</div></div></figcaption><div role="img" aria-label="Visitas por mes: escritorio sube de 186 a 214 y celular de 80 a 140"><svg viewBox="0 -2 520 224" class="w-full h-auto overflow-visible" aria-hidden="true"><line x1="0" x2="520" y1="0" y2="0" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="55" y2="55" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="110" y2="110" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="165" y2="165" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="220" y2="220" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><path d="M18.333333333333336,220.0 L18.333333333333336,96.12499999999999 Q18.333333333333336,92.12499999999999 22.333333333333336,92.12499999999999 L38.333333333333336,92.12499999999999 Q42.333333333333336,92.12499999999999 42.333333333333336,96.12499999999999 L42.333333333333336,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M44.333333333333336,220.0 L44.333333333333336,169.0 Q44.333333333333336,165.0 48.333333333333336,165.0 L64.33333333333334,165.0 Q68.33333333333334,165.0 68.33333333333334,169.0 L68.33333333333334,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M105.0,220.0 L105.0,14.3125 Q105.0,10.3125 109.0,10.3125 L125.0,10.3125 Q129.0,10.3125 129.0,14.3125 L129.0,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M131.0,220.0 L131.0,86.5 Q131.0,82.5 135.0,82.5 L151.0,82.5 Q155.0,82.5 155.0,86.5 L155.0,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M191.66666666666669,220.0 L191.66666666666669,61.0625 Q191.66666666666669,57.0625 195.66666666666669,57.0625 L211.66666666666669,57.0625 Q215.66666666666669,57.0625 215.66666666666669,61.0625 L215.66666666666669,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M217.66666666666669,220.0 L217.66666666666669,141.5 Q217.66666666666669,137.5 221.66666666666669,137.5 L237.66666666666669,137.5 Q241.66666666666669,137.5 241.66666666666669,141.5 L241.66666666666669,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M278.3333333333333,220.0 L278.3333333333333,173.8125 Q278.3333333333333,169.8125 282.3333333333333,169.8125 L298.3333333333333,169.8125 Q302.3333333333333,169.8125 302.3333333333333,173.8125 L302.3333333333333,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M304.3333333333333,220.0 L304.3333333333333,93.375 Q304.3333333333333,89.375 308.3333333333333,89.375 L324.3333333333333,89.375 Q328.3333333333333,89.375 328.3333333333333,93.375 L328.3333333333333,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M365.0,220.0 L365.0,80.3125 Q365.0,76.3125 369.0,76.3125 L385.0,76.3125 Q389.0,76.3125 389.0,80.3125 L389.0,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M391.0,220.0 L391.0,134.625 Q391.0,130.625 395.0,130.625 L411.0,130.625 Q415.0,130.625 415.0,134.625 L415.0,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M451.6666666666667,220.0 L451.6666666666667,76.875 Q451.6666666666667,72.875 455.6666666666667,72.875 L471.6666666666667,72.875 Q475.6666666666667,72.875 475.6666666666667,76.875 L475.6666666666667,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M477.6666666666667,220.0 L477.6666666666667,127.75 Q477.6666666666667,123.75 481.6666666666667,123.75 L497.6666666666667,123.75 Q501.6666666666667,123.75 501.6666666666667,127.75 L501.6666666666667,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /></svg><div class="mt-2 grid grid-cols-6 text-center text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"><span>Ene</span><span>Feb</span><span>Mar</span><span>Abr</span><span>May</span><span>Jun</span></div></div><div class="mt-4 flex justify-center gap-4 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span>Escritorio</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-green dark:bg-ccs-green-br"></span>Celular</span></div><div class="mt-4 pt-4 border-t border-ccs-line dark:border-ccs-dark-line text-sm"><div class="flex items-center gap-1.5 font-medium">Subió 5,2 % este mes<iconify-icon icon="solar:graph-up-outline" class="shrink-0 text-[16px] text-ccs-success dark:text-ccs-dark-success" aria-hidden="true"></iconify-icon></div><p class="mt-0.5 text-ccs-slate dark:text-ccs-dark-text-2">Visitas de enero a junio de 2026.</p></div><details class="mt-3 text-sm"><summary class="cursor-pointer text-ccs-blue dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver los datos</summary><table class="mt-2 w-full text-sm"><thead><tr class="text-ccs-slate dark:text-ccs-dark-text-2"><th class="text-left font-medium py-1">Mes</th><th class="text-right font-medium">Escritorio</th><th class="text-right font-medium">Celular</th></tr></thead><tbody><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Ene</td><td class="text-right tabular-nums">186</td><td class="text-right tabular-nums">80</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Feb</td><td class="text-right tabular-nums">305</td><td class="text-right tabular-nums">200</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Mar</td><td class="text-right tabular-nums">237</td><td class="text-right tabular-nums">120</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Abr</td><td class="text-right tabular-nums">73</td><td class="text-right tabular-nums">190</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">May</td><td class="text-right tabular-nums">209</td><td class="text-right tabular-nums">130</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Jun</td><td class="text-right tabular-nums">214</td><td class="text-right tabular-nums">140</td></tr></tbody></table></details></figure></div>
```

## Barras interactivo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-full max-w-xl rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><figcaption class="flex flex-wrap items-start justify-between gap-4 mb-6"><div><div class="text-base font-semibold">Visitas</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Últimos 6 meses</div></div><div class="flex rounded-ccs border border-ccs-line dark:border-ccs-dark-line overflow-hidden" role="group" aria-label="Serie"><button type="button" aria-pressed="true" class="px-4 py-2 text-left bg-ccs-hover hover:bg-ccs-hover dark:bg-ccs-dark-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"><span class="block text-xs text-ccs-slate dark:text-ccs-dark-text-2">Escritorio</span><span class="block text-xl font-semibold tabular-nums">1.224</span></button><button type="button" aria-pressed="false" class="px-4 py-2 text-left border-l border-ccs-line dark:border-ccs-dark-line hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"><span class="block text-xs text-ccs-slate dark:text-ccs-dark-text-2">Celular</span><span class="block text-xl font-semibold tabular-nums">860</span></button></div></figcaption><div role="img" aria-label="Visitas en escritorio por mes"><svg viewBox="0 -2 520 224" class="w-full h-auto overflow-visible" aria-hidden="true"><line x1="0" x2="520" y1="0" y2="0" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="55" y2="55" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="110" y2="110" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="165" y2="165" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="220" y2="220" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><path d="M21.333333333333336,220.0 L21.333333333333336,96.12499999999999 Q21.333333333333336,92.12499999999999 25.333333333333336,92.12499999999999 L61.33333333333334,92.12499999999999 Q65.33333333333334,92.12499999999999 65.33333333333334,96.12499999999999 L65.33333333333334,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M108.0,220.0 L108.0,14.3125 Q108.0,10.3125 112.0,10.3125 L148.0,10.3125 Q152.0,10.3125 152.0,14.3125 L152.0,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M194.66666666666669,220.0 L194.66666666666669,61.0625 Q194.66666666666669,57.0625 198.66666666666669,57.0625 L234.66666666666669,57.0625 Q238.66666666666669,57.0625 238.66666666666669,61.0625 L238.66666666666669,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M281.3333333333333,220.0 L281.3333333333333,173.8125 Q281.3333333333333,169.8125 285.3333333333333,169.8125 L321.3333333333333,169.8125 Q325.3333333333333,169.8125 325.3333333333333,173.8125 L325.3333333333333,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M368.0,220.0 L368.0,80.3125 Q368.0,76.3125 372.0,76.3125 L408.0,76.3125 Q412.0,76.3125 412.0,80.3125 L412.0,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M454.6666666666667,220.0 L454.6666666666667,76.875 Q454.6666666666667,72.875 458.6666666666667,72.875 L494.6666666666667,72.875 Q498.6666666666667,72.875 498.6666666666667,76.875 L498.6666666666667,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /></svg><div class="mt-2 grid grid-cols-6 text-center text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"><span>Ene</span><span>Feb</span><span>Mar</span><span>Abr</span><span>May</span><span>Jun</span></div></div><details class="mt-3 text-sm"><summary class="cursor-pointer text-ccs-blue dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver los datos</summary><table class="mt-2 w-full text-sm"><thead><tr class="text-ccs-slate dark:text-ccs-dark-text-2"><th class="text-left font-medium py-1">Mes</th><th class="text-right font-medium">Escritorio</th><th class="text-right font-medium">Celular</th></tr></thead><tbody><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Ene</td><td class="text-right tabular-nums">186</td><td class="text-right tabular-nums">80</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Feb</td><td class="text-right tabular-nums">305</td><td class="text-right tabular-nums">200</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Mar</td><td class="text-right tabular-nums">237</td><td class="text-right tabular-nums">120</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Abr</td><td class="text-right tabular-nums">73</td><td class="text-right tabular-nums">190</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">May</td><td class="text-right tabular-nums">209</td><td class="text-right tabular-nums">130</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Jun</td><td class="text-right tabular-nums">214</td><td class="text-right tabular-nums">140</td></tr></tbody></table></details></figure></div>
```

## Líneas

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-full max-w-xl rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><figcaption class="flex flex-wrap items-start justify-between gap-4 mb-6"><div><div class="text-base font-semibold">Visitas</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Enero a junio de 2026</div></div></figcaption><div role="img" aria-label="Visitas por mes, en líneas"><svg viewBox="0 -2 520 224" class="w-full h-auto overflow-visible" aria-hidden="true"><line x1="0" x2="520" y1="0" y2="0" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="55" y2="55" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="110" y2="110" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="165" y2="165" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="220" y2="220" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><polyline points="43.3,92.1 130.0,10.3 216.7,57.1 303.3,169.8 390.0,76.3 476.7,72.9" fill="none" stroke-width="2.5" stroke-linejoin="round" class="stroke-ccs-blue dark:stroke-ccs-dark-accent" /><polyline points="43.3,165.0 130.0,82.5 216.7,137.5 303.3,89.4 390.0,130.6 476.7,123.8" fill="none" stroke-width="2.5" stroke-linejoin="round" class="stroke-ccs-green dark:stroke-ccs-green-br" /><circle cx="43.3" cy="92.1" r="3.5" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><circle cx="130.0" cy="10.3" r="3.5" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><circle cx="216.7" cy="57.1" r="3.5" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><circle cx="303.3" cy="169.8" r="3.5" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><circle cx="390.0" cy="76.3" r="3.5" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><circle cx="476.7" cy="72.9" r="3.5" class="fill-ccs-blue dark:fill-ccs-dark-accent" /></svg><div class="mt-2 grid grid-cols-6 text-center text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"><span>Ene</span><span>Feb</span><span>Mar</span><span>Abr</span><span>May</span><span>Jun</span></div></div><div class="mt-4 flex justify-center gap-4 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span>Escritorio</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-green dark:bg-ccs-green-br"></span>Celular</span></div><div class="mt-4 pt-4 border-t border-ccs-line dark:border-ccs-dark-line text-sm"><div class="flex items-center gap-1.5 font-medium">Subió 5,2 % este mes<iconify-icon icon="solar:graph-up-outline" class="shrink-0 text-[16px] text-ccs-success dark:text-ccs-dark-success" aria-hidden="true"></iconify-icon></div><p class="mt-0.5 text-ccs-slate dark:text-ccs-dark-text-2">Visitas de enero a junio de 2026.</p></div><details class="mt-3 text-sm"><summary class="cursor-pointer text-ccs-blue dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver los datos</summary><table class="mt-2 w-full text-sm"><thead><tr class="text-ccs-slate dark:text-ccs-dark-text-2"><th class="text-left font-medium py-1">Mes</th><th class="text-right font-medium">Escritorio</th><th class="text-right font-medium">Celular</th></tr></thead><tbody><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Ene</td><td class="text-right tabular-nums">186</td><td class="text-right tabular-nums">80</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Feb</td><td class="text-right tabular-nums">305</td><td class="text-right tabular-nums">200</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Mar</td><td class="text-right tabular-nums">237</td><td class="text-right tabular-nums">120</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Abr</td><td class="text-right tabular-nums">73</td><td class="text-right tabular-nums">190</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">May</td><td class="text-right tabular-nums">209</td><td class="text-right tabular-nums">130</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Jun</td><td class="text-right tabular-nums">214</td><td class="text-right tabular-nums">140</td></tr></tbody></table></details></figure></div>
```

## Área

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-full max-w-xl rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><figcaption class="flex flex-wrap items-start justify-between gap-4 mb-6"><div><div class="text-base font-semibold">Visitas en escritorio</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Enero a junio de 2026</div></div></figcaption><div role="img" aria-label="Visitas en escritorio por mes, en área"><svg viewBox="0 -2 520 224" class="w-full h-auto overflow-visible" aria-hidden="true"><line x1="0" x2="520" y1="0" y2="0" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="55" y2="55" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="110" y2="110" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="165" y2="165" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="220" y2="220" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><path d="M43.333333333333336,220 L43.3,92.1 L130.0,10.3 L216.7,57.1 L303.3,169.8 L390.0,76.3 L476.7,72.9 L476.6666666666667,220 Z" class="fill-ccs-blue/15 dark:fill-ccs-dark-accent/20" /><polyline points="43.3,92.1 130.0,10.3 216.7,57.1 303.3,169.8 390.0,76.3 476.7,72.9" fill="none" stroke-width="2" class="stroke-ccs-blue dark:stroke-ccs-dark-accent" /></svg><div class="mt-2 grid grid-cols-6 text-center text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"><span>Ene</span><span>Feb</span><span>Mar</span><span>Abr</span><span>May</span><span>Jun</span></div></div><div class="mt-4 flex justify-center gap-4 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span>Escritorio</span></div><div class="mt-4 pt-4 border-t border-ccs-line dark:border-ccs-dark-line text-sm"><div class="flex items-center gap-1.5 font-medium">Subió 5,2 % este mes<iconify-icon icon="solar:graph-up-outline" class="shrink-0 text-[16px] text-ccs-success dark:text-ccs-dark-success" aria-hidden="true"></iconify-icon></div><p class="mt-0.5 text-ccs-slate dark:text-ccs-dark-text-2">Visitas de enero a junio de 2026.</p></div><details class="mt-3 text-sm"><summary class="cursor-pointer text-ccs-blue dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Ver los datos</summary><table class="mt-2 w-full text-sm"><thead><tr class="text-ccs-slate dark:text-ccs-dark-text-2"><th class="text-left font-medium py-1">Mes</th><th class="text-right font-medium">Escritorio</th><th class="text-right font-medium">Celular</th></tr></thead><tbody><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Ene</td><td class="text-right tabular-nums">186</td><td class="text-right tabular-nums">80</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Feb</td><td class="text-right tabular-nums">305</td><td class="text-right tabular-nums">200</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Mar</td><td class="text-right tabular-nums">237</td><td class="text-right tabular-nums">120</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Abr</td><td class="text-right tabular-nums">73</td><td class="text-right tabular-nums">190</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">May</td><td class="text-right tabular-nums">209</td><td class="text-right tabular-nums">130</td></tr><tr class="border-t border-ccs-line dark:border-ccs-dark-line"><td class="py-1">Jun</td><td class="text-right tabular-nums">214</td><td class="text-right tabular-nums">140</td></tr></tbody></table></details></figure></div>
```

## Siete series

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-full max-w-xl rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><figcaption class="mb-6"><div class="text-base font-semibold">Inscripciones por canal</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Primer trimestre de 2026</div></figcaption><div role="img" aria-label="Inscripciones por canal en enero, febrero y marzo"><svg viewBox="0 -2 520 224" class="w-full h-auto overflow-visible" aria-hidden="true"><line x1="0" x2="520" y1="0" y2="0" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="55" y2="55" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="110" y2="110" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="165" y2="165" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="220" y2="220" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><path d="M16.66666666666667,220.0 L16.66666666666667,95.12499999999999 Q16.66666666666667,92.12499999999999 19.66666666666667,92.12499999999999 L29.66666666666667,92.12499999999999 Q32.66666666666667,92.12499999999999 32.66666666666667,95.12499999999999 L32.66666666666667,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M36.66666666666667,220.0 L36.66666666666667,168.0 Q36.66666666666667,165.0 39.66666666666667,165.0 L49.66666666666667,165.0 Q52.66666666666667,165.0 52.66666666666667,168.0 L52.66666666666667,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M56.66666666666667,220.0 L56.66666666666667,140.5 Q56.66666666666667,137.5 59.66666666666667,137.5 L69.66666666666667,137.5 Q72.66666666666667,137.5 72.66666666666667,140.5 L72.66666666666667,220.0 Z" class="fill-ccs-naranjo dark:fill-ccs-dark-naranjo" /><path d="M76.66666666666667,220.0 L76.66666666666667,157.6875 Q76.66666666666667,154.6875 79.66666666666667,154.6875 L89.66666666666667,154.6875 Q92.66666666666667,154.6875 92.66666666666667,157.6875 L92.66666666666667,220.0 Z" class="fill-ccs-violeta dark:fill-ccs-dark-violeta" /><path d="M96.66666666666667,220.0 L96.66666666666667,126.75 Q96.66666666666667,123.75 99.66666666666667,123.75 L109.66666666666667,123.75 Q112.66666666666667,123.75 112.66666666666667,126.75 L112.66666666666667,220.0 Z" class="fill-ccs-turquesa dark:fill-ccs-dark-turquesa" /><path d="M116.66666666666667,220.0 L116.66666666666667,181.75 Q116.66666666666667,178.75 119.66666666666667,178.75 L129.66666666666669,178.75 Q132.66666666666669,178.75 132.66666666666669,181.75 L132.66666666666669,220.0 Z" class="fill-ccs-frambuesa dark:fill-ccs-dark-frambuesa" /><path d="M136.66666666666669,220.0 L136.66666666666669,147.375 Q136.66666666666669,144.375 139.66666666666669,144.375 L149.66666666666669,144.375 Q152.66666666666669,144.375 152.66666666666669,147.375 L152.66666666666669,220.0 Z" class="fill-ccs-mostaza dark:fill-ccs-mostaza" /><path d="M190.0,220.0 L190.0,13.3125 Q190.0,10.3125 193.0,10.3125 L203.0,10.3125 Q206.0,10.3125 206.0,13.3125 L206.0,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M210.0,220.0 L210.0,85.5 Q210.0,82.5 213.0,82.5 L223.0,82.5 Q226.0,82.5 226.0,85.5 L226.0,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M230.0,220.0 L230.0,119.875 Q230.0,116.875 233.0,116.875 L243.0,116.875 Q246.0,116.875 246.0,119.875 L246.0,220.0 Z" class="fill-ccs-naranjo dark:fill-ccs-dark-naranjo" /><path d="M250.0,220.0 L250.0,133.625 Q250.0,130.625 253.0,130.625 L263.0,130.625 Q266.0,130.625 266.0,133.625 L266.0,220.0 Z" class="fill-ccs-violeta dark:fill-ccs-dark-violeta" /><path d="M270.0,220.0 L270.0,161.125 Q270.0,158.125 273.0,158.125 L283.0,158.125 Q286.0,158.125 286.0,161.125 L286.0,220.0 Z" class="fill-ccs-turquesa dark:fill-ccs-dark-turquesa" /><path d="M290.0,220.0 L290.0,140.5 Q290.0,137.5 293.0,137.5 L303.0,137.5 Q306.0,137.5 306.0,140.5 L306.0,220.0 Z" class="fill-ccs-frambuesa dark:fill-ccs-dark-frambuesa" /><path d="M310.0,220.0 L310.0,106.125 Q310.0,103.125 313.0,103.125 L323.0,103.125 Q326.0,103.125 326.0,106.125 L326.0,220.0 Z" class="fill-ccs-mostaza dark:fill-ccs-mostaza" /><path d="M363.33333333333337,220.0 L363.33333333333337,60.0625 Q363.33333333333337,57.0625 366.33333333333337,57.0625 L376.33333333333337,57.0625 Q379.33333333333337,57.0625 379.33333333333337,60.0625 L379.33333333333337,220.0 Z" class="fill-ccs-blue dark:fill-ccs-dark-accent" /><path d="M383.33333333333337,220.0 L383.33333333333337,140.5 Q383.33333333333337,137.5 386.33333333333337,137.5 L396.33333333333337,137.5 Q399.33333333333337,137.5 399.33333333333337,140.5 L399.33333333333337,220.0 Z" class="fill-ccs-green dark:fill-ccs-green-br" /><path d="M403.33333333333337,220.0 L403.33333333333337,161.125 Q403.33333333333337,158.125 406.33333333333337,158.125 L416.33333333333337,158.125 Q419.33333333333337,158.125 419.33333333333337,161.125 L419.33333333333337,220.0 Z" class="fill-ccs-naranjo dark:fill-ccs-dark-naranjo" /><path d="M423.33333333333337,220.0 L423.33333333333337,113.0 Q423.33333333333337,110.0 426.33333333333337,110.0 L436.33333333333337,110.0 Q439.33333333333337,110.0 439.33333333333337,113.0 L439.33333333333337,220.0 Z" class="fill-ccs-violeta dark:fill-ccs-dark-violeta" /><path d="M443.33333333333337,220.0 L443.33333333333337,147.375 Q443.33333333333337,144.375 446.33333333333337,144.375 L456.33333333333337,144.375 Q459.33333333333337,144.375 459.33333333333337,147.375 L459.33333333333337,220.0 Z" class="fill-ccs-turquesa dark:fill-ccs-dark-turquesa" /><path d="M463.33333333333337,220.0 L463.33333333333337,126.75 Q463.33333333333337,123.75 466.33333333333337,123.75 L476.33333333333337,123.75 Q479.33333333333337,123.75 479.33333333333337,126.75 L479.33333333333337,220.0 Z" class="fill-ccs-frambuesa dark:fill-ccs-dark-frambuesa" /><path d="M483.33333333333337,220.0 L483.33333333333337,168.0 Q483.33333333333337,165.0 486.33333333333337,165.0 L496.33333333333337,165.0 Q499.33333333333337,165.0 499.33333333333337,168.0 L499.33333333333337,220.0 Z" class="fill-ccs-mostaza dark:fill-ccs-mostaza" /></svg><div class="mt-2 grid grid-cols-3 text-center text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"><span>Ene</span><span>Feb</span><span>Mar</span></div></div><div class="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span>Sitio web</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-green dark:bg-ccs-green-br"></span>Correo</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-naranjo dark:bg-ccs-dark-naranjo"></span>Redes sociales</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-violeta dark:bg-ccs-dark-violeta"></span>Referidos</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-turquesa dark:bg-ccs-dark-turquesa"></span>Prensa</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-frambuesa dark:bg-ccs-dark-frambuesa"></span>Eventos</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-mostaza dark:bg-ccs-mostaza"></span>Teléfono</span></div></figure></div>
```

## Con Otros

```html
<div class="flex flex-wrap items-start justify-center gap-8"><figure class="w-full max-w-xl rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><figcaption class="mb-6"><div class="text-base font-semibold">Visitas por origen</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Enero a junio de 2026</div></figcaption><div role="img" aria-label="Visitas por origen: cuatro orígenes y Otros"><svg viewBox="0 -2 520 224" class="w-full h-auto overflow-visible" aria-hidden="true"><line x1="0" x2="520" y1="0" y2="0" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="55" y2="55" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="110" y2="110" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="165" y2="165" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><line x1="0" x2="520" y1="220" y2="220" class="stroke-ccs-line dark:stroke-ccs-dark-line" stroke-width="1" /><polyline points="43.3,92.1 130.0,10.3 216.7,57.1 303.3,169.8 390.0,76.3 476.7,72.9" fill="none" stroke-width="2.5" stroke-linejoin="round" class="stroke-ccs-blue dark:stroke-ccs-dark-accent" /><polyline points="43.3,165.0 130.0,82.5 216.7,137.5 303.3,89.4 390.0,130.6 476.7,123.8" fill="none" stroke-width="2.5" stroke-linejoin="round" class="stroke-ccs-green dark:stroke-ccs-green-br" /><polyline points="43.3,137.5 130.0,116.9 216.7,158.1 303.3,110.0 390.0,144.4 476.7,96.2" fill="none" stroke-width="2.5" stroke-linejoin="round" class="stroke-ccs-naranjo dark:stroke-ccs-dark-naranjo" /><polyline points="43.3,178.8 130.0,158.1 216.7,123.8 303.3,151.2 390.0,103.1 476.7,130.6" fill="none" stroke-width="2.5" stroke-linejoin="round" class="stroke-ccs-violeta dark:stroke-ccs-dark-violeta" /><polyline points="43.3,192.5 130.0,178.8 216.7,185.6 303.3,171.9 390.0,189.1 476.7,182.2" fill="none" stroke-width="2.5" stroke-dasharray="4 4" class="stroke-ccs-slate dark:stroke-ccs-dark-text-2" /></svg><div class="mt-2 grid grid-cols-6 text-center text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"><span>Ene</span><span>Feb</span><span>Mar</span><span>Abr</span><span>May</span><span>Jun</span></div></div><div class="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span>Buscadores</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-green dark:bg-ccs-green-br"></span>Directo</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-naranjo dark:bg-ccs-dark-naranjo"></span>Correo</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-violeta dark:bg-ccs-dark-violeta"></span>Redes sociales</span><span class="inline-flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-none bg-ccs-slate dark:bg-ccs-dark-text-2"></span>Otros</span></div></figure></div>
```

## Tooltip

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-40 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-white px-2.5 py-1.5 text-xs shadow-ccs dark:bg-ccs-dark-overlay dark:shadow-none"><div class="font-medium mb-1">Enero</div><div class="space-y-1"><div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Escritorio</span><span class="ml-auto pl-4 font-medium tabular-nums">186</span></div><div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-none bg-ccs-green dark:bg-ccs-green-br"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Celular</span><span class="ml-auto pl-4 font-medium tabular-nums">80</span></div></div></div><div class="w-40 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-white px-2.5 py-1.5 text-xs shadow-ccs dark:bg-ccs-dark-overlay dark:shadow-none"><div class="font-medium mb-1">Enero</div><div class="space-y-1"><div class="flex items-center gap-2"><span class="w-1 self-stretch rounded-full bg-ccs-blue dark:bg-ccs-dark-accent"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Escritorio</span><span class="ml-auto pl-4 font-medium tabular-nums">186</span></div><div class="flex items-center gap-2"><span class="w-1 self-stretch rounded-full bg-ccs-green dark:bg-ccs-green-br"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Celular</span><span class="ml-auto pl-4 font-medium tabular-nums">80</span></div></div></div><div class="w-40 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-white px-2.5 py-1.5 text-xs shadow-ccs dark:bg-ccs-dark-overlay dark:shadow-none"><div class="font-medium mb-1">Enero</div><div class="space-y-1"><div class="flex items-center gap-2"><span class="w-0 self-stretch border-l-2 border-dashed border-ccs-blue dark:border-ccs-dark-accent"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Escritorio</span><span class="ml-auto pl-4 font-medium tabular-nums">186</span></div><div class="flex items-center gap-2"><span class="w-0 self-stretch border-l-2 border-dashed border-ccs-green dark:border-ccs-green-br"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Celular</span><span class="ml-auto pl-4 font-medium tabular-nums">80</span></div></div></div><div class="w-40 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-white px-2.5 py-1.5 text-xs shadow-ccs dark:bg-ccs-dark-overlay dark:shadow-none"><div class="space-y-1"><div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-none bg-ccs-blue dark:bg-ccs-dark-accent"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Escritorio</span><span class="ml-auto pl-4 font-medium tabular-nums">186</span></div><div class="flex items-center gap-2"><span class="w-2.5 h-2.5 rounded-none bg-ccs-green dark:bg-ccs-green-br"></span><span class="text-ccs-slate dark:text-ccs-dark-text-2">Celular</span><span class="ml-auto pl-4 font-medium tabular-nums">80</span></div></div></div></div>
```

## Guía: Colores de las series

Las series usan siempre este orden: 1 Azul CCS, 2 Verde CCS, 3 Naranjo, 4 Violeta, 5 Turquesa, 6 Frambuesa y 7 Mostaza. Las clases, en claro y en oscuro, están en Componentes › Color › Gráficos. El orden separa los colores parecidos: verde y turquesa, naranjo y mostaza.
Con más de 4 o 5 series, el resto se agrupa en Otros, en gris (ccs-slate, oscuro ccs-dark-text-2) y con línea punteada. Con más de 7, el gráfico se divide en varios. Los colores de las series no llevan texto encima y no reemplazan a los de estado: un dato con error o advertencia usa esos colores.

## Guía: Reglas

- Un mensaje por gráfico: el título dice qué se mide y el pie, qué conclusión sacar.
- Barras para comparar meses o categorías; líneas para tendencias largas; nada de tortas con más de 3 partes.
- Eje vertical desde 0 en barras y área.
- Leyenda siempre que haya más de una serie; el color nunca va solo.
- Cifras en formato chileno: 1.224 y 5,2 %.