Chart

Contenedor genérico para gráficos. Compón cabecera con .head, SVG con .chart-svg y leyenda con .chart-legend. El SVG es responsabilidad del consumidor — usa .chart-bar, .chart-line, .chart-area, .chart-dot, etc.

Nota: la serie Proyectado se dibuja con stroke-dasharray="4 4"; la leyenda usa .chart-legend-dash para reflejar el mismo patrón. Las <rect> y <polyline> de los demos llevan <title> hijo para tooltip nativo del navegador.

Default · línea + área

Ventas 2026

Mensual · proyectado vs real

€84,2k

▲ +12,4% vs 2025

Real Proyectado

<div class="chart">
  
<header class="head">
  <div>
    <h3 class="title sm">Ventas 2026</h3>
    <p class="sub sm">Mensual · proyectado vs real</p>
  </div>
  <div style="text-align:right">
    <div class="chart-big">€84,2k</div>
    <div class="chart-delta chart-delta--up">▲ +12,4% vs 2025</div>
  </div>
</header>
<svg class="chart-svg" viewBox="0 0 600 200" preserveAspectRatio="none" style="height:200px">
  <defs>
    <linearGradient id="ok-area-grad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%"  stop-color="var(--brand)" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="var(--brand)" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <g class="chart-grid">
    <line x1="40" x2="590" y1="20"  y2="20"/>
    <line x1="40" x2="590" y1="70"  y2="70"/>
    <line x1="40" x2="590" y1="120" y2="120"/>
    <line x1="40" x2="590" y1="170" y2="170"/>
  </g>
  <g class="chart-axis">
    <text x="34" y="24" text-anchor="end">100k</text>
    <text x="34" y="74" text-anchor="end">75k</text>
    <text x="34" y="124" text-anchor="end">50k</text>
    <text x="34" y="174" text-anchor="end">25k</text>
  </g>
  <path class="chart-area" d="M50,140 L100,128 L150,118 L200,98 L250,108 L300,82 L350,68 L400,72 L450,54 L500,42 L500,180 L50,180 Z"/>
  <path class="chart-line" d="M50,140 L100,128 L150,118 L200,98 L250,108 L300,82 L350,68 L400,72 L450,54 L500,42"/>
  <path class="chart-line chart-line--mute" stroke="currentColor" stroke-dasharray="4 4" d="M50,150 L100,138 L150,124 L200,108 L250,100 L300,90 L350,78 L400,68 L450,58 L500,48"><title>Proyectado · línea discontinua</title></path>
  <circle class="chart-dot" cx="500" cy="42" r="4"/>
</svg>
<div class="chart-legend">
  <span class="chart-legend-item"><span class="chart-legend-dot"></span> Real</span>
  <span class="chart-legend-item"><span class="chart-legend-dash"></span> Proyectado</span>
</div>

</div>

{% from "chart.jinja" import chart %}
{% call chart() %}
<header class="head">
  <div>
    <h3 class="title sm">Ventas 2026</h3>
    <p class="sub sm">Mensual · proyectado vs real</p>
  </div>
  <div style="text-align:right">
    <div class="chart-big">€84,2k</div>
    <div class="chart-delta chart-delta--up">▲ +12,4% vs 2025</div>
  </div>
</header>
<svg class="chart-svg" viewBox="0 0 600 200" preserveAspectRatio="none" style="height:200px">
  <defs>
    <linearGradient id="ok-area-grad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%"  stop-color="var(--brand)" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="var(--brand)" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <g class="chart-grid">
    <line x1="40" x2="590" y1="20"  y2="20"/>
    <line x1="40" x2="590" y1="70"  y2="70"/>
    <line x1="40" x2="590" y1="120" y2="120"/>
    <line x1="40" x2="590" y1="170" y2="170"/>
  </g>
  <g class="chart-axis">
    <text x="34" y="24" text-anchor="end">100k</text>
    <text x="34" y="74" text-anchor="end">75k</text>
    <text x="34" y="124" text-anchor="end">50k</text>
    <text x="34" y="174" text-anchor="end">25k</text>
  </g>
  <path class="chart-area" d="M50,140 L100,128 L150,118 L200,98 L250,108 L300,82 L350,68 L400,72 L450,54 L500,42 L500,180 L50,180 Z"/>
  <path class="chart-line" d="M50,140 L100,128 L150,118 L200,98 L250,108 L300,82 L350,68 L400,72 L450,54 L500,42"/>
  <path class="chart-line chart-line--mute" stroke="currentColor" stroke-dasharray="4 4" d="M50,150 L100,138 L150,124 L200,108 L250,100 L300,90 L350,78 L400,68 L450,58 L500,48"><title>Proyectado · línea discontinua</title></path>
  <circle class="chart-dot" cx="500" cy="42" r="4"/>
</svg>
<div class="chart-legend">
  <span class="chart-legend-item"><span class="chart-legend-dot"></span> Real</span>
  <span class="chart-legend-item"><span class="chart-legend-dash"></span> Proyectado</span>
</div>
{% endcall %}

<Chart>
<header class="head">
  <div>
    <h3 class="title sm">Ventas 2026</h3>
    <p class="sub sm">Mensual · proyectado vs real</p>
  </div>
  <div style="text-align:right">
    <div class="chart-big">€84,2k</div>
    <div class="chart-delta chart-delta--up">▲ +12,4% vs 2025</div>
  </div>
</header>
<svg class="chart-svg" viewBox="0 0 600 200" preserveAspectRatio="none" style="height:200px">
  <defs>
    <linearGradient id="ok-area-grad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%"  stop-color="var(--brand)" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="var(--brand)" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <g class="chart-grid">
    <line x1="40" x2="590" y1="20"  y2="20"/>
    <line x1="40" x2="590" y1="70"  y2="70"/>
    <line x1="40" x2="590" y1="120" y2="120"/>
    <line x1="40" x2="590" y1="170" y2="170"/>
  </g>
  <g class="chart-axis">
    <text x="34" y="24" text-anchor="end">100k</text>
    <text x="34" y="74" text-anchor="end">75k</text>
    <text x="34" y="124" text-anchor="end">50k</text>
    <text x="34" y="174" text-anchor="end">25k</text>
  </g>
  <path class="chart-area" d="M50,140 L100,128 L150,118 L200,98 L250,108 L300,82 L350,68 L400,72 L450,54 L500,42 L500,180 L50,180 Z"/>
  <path class="chart-line" d="M50,140 L100,128 L150,118 L200,98 L250,108 L300,82 L350,68 L400,72 L450,54 L500,42"/>
  <path class="chart-line chart-line--mute" stroke="currentColor" stroke-dasharray="4 4" d="M50,150 L100,138 L150,124 L200,108 L250,100 L300,90 L350,78 L400,68 L450,58 L500,48"><title>Proyectado · línea discontinua</title></path>
  <circle class="chart-dot" cx="500" cy="42" r="4"/>
</svg>
<div class="chart-legend">
  <span class="chart-legend-item"><span class="chart-legend-dot"></span> Real</span>
  <span class="chart-legend-item"><span class="chart-legend-dash"></span> Proyectado</span>
</div>
</Chart>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Bar chart

Ventas por canal

€42,1k

POS Web App Marketplace Otros

<div class="chart">
  
<header class="head">
  <h3 class="title sm">Ventas por canal</h3>
  <span class="chart-big">€42,1k</span>
</header>
<svg class="chart-svg" viewBox="0 0 320 160" preserveAspectRatio="none" style="height:160px">
  <rect class="chart-bar"       x="20"  y="60"  width="40" height="80"><title>POS · €18,2k</title></rect>
  <rect class="chart-bar chart-bar--leaf" x="80"  y="40"  width="40" height="100"><title>Web · €12,5k</title></rect>
  <rect class="chart-bar chart-bar--info" x="140" y="80"  width="40" height="60"><title>App · €7,8k</title></rect>
  <rect class="chart-bar chart-bar--warn" x="200" y="100" width="40" height="40"><title>Marketplace · €2,9k</title></rect>
  <rect class="chart-bar chart-bar--ink2" x="260" y="120" width="40" height="20"><title>Otros · €0,7k</title></rect>
</svg>
<div class="chart-legend">
  <span class="chart-legend-item"><span class="chart-legend-dot"></span> POS</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--leaf)"></span> Web</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--info)"></span> App</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--warn)"></span> Marketplace</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--ink-2)"></span> Otros</span>
</div>

</div>

{% from "chart.jinja" import chart %}
{% call chart() %}
<header class="head">
  <h3 class="title sm">Ventas por canal</h3>
  <span class="chart-big">€42,1k</span>
</header>
<svg class="chart-svg" viewBox="0 0 320 160" preserveAspectRatio="none" style="height:160px">
  <rect class="chart-bar"       x="20"  y="60"  width="40" height="80"><title>POS · €18,2k</title></rect>
  <rect class="chart-bar chart-bar--leaf" x="80"  y="40"  width="40" height="100"><title>Web · €12,5k</title></rect>
  <rect class="chart-bar chart-bar--info" x="140" y="80"  width="40" height="60"><title>App · €7,8k</title></rect>
  <rect class="chart-bar chart-bar--warn" x="200" y="100" width="40" height="40"><title>Marketplace · €2,9k</title></rect>
  <rect class="chart-bar chart-bar--ink2" x="260" y="120" width="40" height="20"><title>Otros · €0,7k</title></rect>
</svg>
<div class="chart-legend">
  <span class="chart-legend-item"><span class="chart-legend-dot"></span> POS</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--leaf)"></span> Web</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--info)"></span> App</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--warn)"></span> Marketplace</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--ink-2)"></span> Otros</span>
</div>
{% endcall %}

<Chart>
<header class="head">
  <h3 class="title sm">Ventas por canal</h3>
  <span class="chart-big">€42,1k</span>
</header>
<svg class="chart-svg" viewBox="0 0 320 160" preserveAspectRatio="none" style="height:160px">
  <rect class="chart-bar"       x="20"  y="60"  width="40" height="80"><title>POS · €18,2k</title></rect>
  <rect class="chart-bar chart-bar--leaf" x="80"  y="40"  width="40" height="100"><title>Web · €12,5k</title></rect>
  <rect class="chart-bar chart-bar--info" x="140" y="80"  width="40" height="60"><title>App · €7,8k</title></rect>
  <rect class="chart-bar chart-bar--warn" x="200" y="100" width="40" height="40"><title>Marketplace · €2,9k</title></rect>
  <rect class="chart-bar chart-bar--ink2" x="260" y="120" width="40" height="20"><title>Otros · €0,7k</title></rect>
</svg>
<div class="chart-legend">
  <span class="chart-legend-item"><span class="chart-legend-dot"></span> POS</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--leaf)"></span> Web</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--info)"></span> App</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--warn)"></span> Marketplace</span>
  <span class="chart-legend-item"><span class="chart-legend-dot" style="background:var(--ink-2)"></span> Otros</span>
</div>
</Chart>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Variant flat · embebido

Tendencia 24h

▼ −2,1%

<div class="chart flat">
  
<header class="head">
  <h3 class="title sm">Tendencia 24h</h3>
  <span class="chart-delta chart-delta--down">▼ −2,1%</span>
</header>
<svg class="chart-svg" viewBox="0 0 240 80" preserveAspectRatio="none" style="height:80px">
  <path class="chart-line chart-line--leaf" d="M0,40 L30,28 L60,32 L90,18 L120,24 L150,12 L180,20 L210,8 L240,16"><title>Tendencia 24h · −2,1%</title></path>
</svg>

</div>

{% from "chart.jinja" import chart %}
{% call chart(variant="flat") %}
<header class="head">
  <h3 class="title sm">Tendencia 24h</h3>
  <span class="chart-delta chart-delta--down">▼ −2,1%</span>
</header>
<svg class="chart-svg" viewBox="0 0 240 80" preserveAspectRatio="none" style="height:80px">
  <path class="chart-line chart-line--leaf" d="M0,40 L30,28 L60,32 L90,18 L120,24 L150,12 L180,20 L210,8 L240,16"><title>Tendencia 24h · −2,1%</title></path>
</svg>
{% endcall %}

<Chart variant="flat">
<header class="head">
  <h3 class="title sm">Tendencia 24h</h3>
  <span class="chart-delta chart-delta--down">▼ −2,1%</span>
</header>
<svg class="chart-svg" viewBox="0 0 240 80" preserveAspectRatio="none" style="height:80px">
  <path class="chart-line chart-line--leaf" d="M0,40 L30,28 L60,32 L90,18 L120,24 L150,12 L180,20 L210,8 L240,16"><title>Tendencia 24h · −2,1%</title></path>
</svg>
</Chart>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`variant`	"default"\|"flat"	"default"	"flat" elimina fondo/borde para incrustar.
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Compón `.head` (cabecera), `.chart-svg`, `.chart-legend`. SVG con sub-clases `.chart-bar`, `.chart-line`, `.chart-area`, `.chart-dot`, `.chart-grid`, `.chart-axis`.