TL;DR: Los gráficos HTML para Power BI se construyen escribiendo SVG dentro de una medida DAX y mostrándolo con el visual HTML Content. Con tres patrones —barra de progreso, sparkline y anillo KPI— cubres el 90% de los minigráficos de un tablero sin instalar visuales de terceros y sin salir del modelo. El SVG es texto: lo concatenas con datos del modelo y se renderiza como vector nítido a cualquier tamaño.
¿Qué son los gráficos HTML en Power BI?
Un gráfico HTML en Power BI es una visualización dibujada con marcado SVG o HTML generado por una medida DAX y renderizado con el visual HTML Content. En lugar de configurar un visual nativo, escribes el <svg> como texto, le inyectas los valores del modelo con CONCATENATE o el operador &, y el visual lo pinta como vector. Es la misma familia de técnica que las tarjetas animadas con HTML Content, pero enfocada en formas de datos (barras, líneas, anillos) en vez de texto estilizado.
La ventaja clave es que el SVG es resolución-independiente: el mismo código se ve nítido en un KPI de 80 px o en una tarjeta de 600 px. En mis pruebas en Power BI Desktop 2.130, una medida SVG de ~25 líneas renderiza un sparkline en menos de 1 ms por fila porque no hay motor gráfico extra: es solo texto que el navegador embebido dibuja. Si vienes de las tarjetas, este enfoque amplía lo visto en la guía de cards animados con HTML Content hacia gráficos de datos reales.
¿Cuándo usar gráficos HTML en lugar de visuales nativos?
Usa gráficos HTML cuando necesitas un minigráfico dentro de una tarjeta o tabla, control total del diseño, o evitar dependencias de visuales externos certificados. Para análisis interactivo completo (zoom, tooltips ricos, cross-filtering), los visuales nativos siguen ganando. El SVG brilla en lo pequeño y lo embebido, no en lo grande e interactivo.
Conviene el enfoque HTML/SVG en estos casos:
- Sparklines en una matriz: una línea de tendencia por fila, imposible con la mayoría de visuales nativos.
- Barras de progreso o KPI rings dentro de tarjetas de resumen.
- Diseño corporativo estricto (IBCS, colores de marca, tipografías) donde el formato nativo no llega.
- Reportes que deben funcionar sin instalar visuales de AppSource, por políticas de TI.
Evítalo cuando el usuario necesita interactuar con el gráfico (resaltar, filtrar al hacer clic) o cuando una distribución completa requiere ejes, leyendas y miles de puntos: ahí un visual nativo es más rápido de mantener.
¿Qué necesitas para empezar?
Necesitas un solo componente: el visual HTML Content (de Daniel Marsh-Patrick), gratuito en AppSource, más medidas DAX que devuelvan cadenas SVG. No hace falta Python, JavaScript ni conexiones externas. El visual toma el texto de una medida y lo renderiza como HTML/SVG en el lienzo.
Pasos de preparación:
- En Power BI Desktop, panel Visualizaciones → Obtener más objetos visuales → AppSource.
- Busca HTML Content e instálalo (elige la versión «lite» si no necesitas interacción JS).
- Arrastra el visual al lienzo y, en el campo Values, coloca la medida SVG que crearás a continuación.
Una advertencia de formato: el visual espera una cadena válida. Si la medida devuelve BLANK(), no se pinta nada; controla siempre los nulos con COALESCE o un IF que devuelva un SVG vacío de respaldo.
¿Cómo crear una barra de progreso con SVG y DAX?
Generas la barra dibujando dos rectángulos SVG: uno de fondo (la pista) y otro de relleno cuyo ancho es proporcional al porcentaje de avance. La medida calcula el porcentaje, lo limita entre 0 y 1, y concatena el <svg> con ese ancho. El resultado es una barra que se actualiza con cualquier filtro del informe.
Esta medida asume que ya tienes [% Avance] (un valor entre 0 y 1):
Barra Progreso SVG =
VAR Pct = MIN ( MAX ( [% Avance], 0 ), 1 ) -- recortar a [0,1]
VAR Ancho = 200
VAR Relleno = INT ( Pct * Ancho )
VAR Color = IF ( Pct >= 0.8, "#22c55e", IF ( Pct >= 0.5, "#eab308", "#ef4444" ) )
RETURN
"<svg width='" & Ancho & "' height='18' xmlns='http://www.w3.org/2000/svg'>"
& "<rect width='" & Ancho & "' height='18' rx='9' fill='#1e293b'/>"
& "<rect width='" & Relleno & "' height='18' rx='9' fill='" & Color & "'/>"
& "<text x='" & Ancho/2 & "' y='13' fill='#fff' font-size='11' "
& "font-family='Segoe UI' text-anchor='middle'>"
& FORMAT ( Pct, "0%" ) & "</text>"
& "</svg>"El truco está en VAR Relleno = INT ( Pct * Ancho ): el ancho del segundo rectángulo es lo único que cambia con los datos. El semáforo de color (#22c55e, #eab308, #ef4444) aporta lectura inmediata sin formato condicional nativo. En mis pruebas, esta barra se mantiene nítida al escalar la tarjeta porque el SVG no se rasteriza.
¿Cómo crear un sparkline (minigráfico de línea)?
Un sparkline se dibuja con un elemento <polyline> cuyos puntos provienen de iterar la serie temporal y mapear cada valor a coordenadas X/Y. La parte difícil es normalizar: conviertes cada valor en una posición vertical relativa al mínimo y máximo de la serie, de modo que la línea ocupe bien el alto disponible.
El patrón usa CONCATENATEX para recorrer las fechas y construir la lista de puntos:
Sparkline Ventas =
VAR Alto = 40
VAR Ancho = 150
VAR Tabla = ADDCOLUMNS ( VALUES ( Calendario[Fecha] ), "@v", [Ventas] )
VAR Min = MINX ( Tabla, [@v] )
VAR Max = MAXX ( Tabla, [@v] )
VAR Rango = MAX ( Max - Min, 1 )
VAR N = COUNTROWS ( Tabla )
VAR Puntos =
CONCATENATEX (
ADDCOLUMNS ( Tabla, "@i", RANK ( DENSE, Tabla, ORDERBY ( Calendario[Fecha], ASC ) ) ),
VAR X = ( [@i] - 1 ) / MAX ( N - 1, 1 ) * Ancho
VAR Y = Alto - ( [@v] - Min ) / Rango * Alto
RETURN FORMAT ( X, "0" ) & "," & FORMAT ( Y, "0" ),
" ", Calendario[Fecha], ASC
)
RETURN
"<svg width='" & Ancho & "' height='" & Alto & "' xmlns='http://www.w3.org/2000/svg'>"
& "<polyline points='" & Puntos & "' fill='none' stroke='#38bdf8' stroke-width='2'/>"
& "</svg>"Colocada en una matriz junto a una dimensión (cliente, producto, región), esta medida pinta una línea de tendencia por fila: algo que ningún visual de tarjeta nativo resuelve de forma tan compacta. El stroke-width='2' y el color cian (#38bdf8) la hacen legible incluso a 40 px de alto.
¿Cómo crear un anillo de progreso (KPI ring)?
El anillo se construye con dos círculos SVG superpuestos y la propiedad stroke-dasharray, que define qué porción de la circunferencia se pinta. Calculas la circunferencia (2 · π · r), pintas el primer círculo completo como pista y el segundo con un dasharray proporcional al avance; un giro de -90° lo arranca arriba.
Anillo KPI SVG =
VAR Pct = MIN ( MAX ( [% Cumplimiento], 0 ), 1 )
VAR R = 35
VAR Circ = 2 * PI() * R
VAR Avance = Circ * Pct
RETURN
"<svg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'>"
& "<circle cx='45' cy='45' r='" & R & "' fill='none' stroke='#1e293b' stroke-width='8'/>"
& "<circle cx='45' cy='45' r='" & R & "' fill='none' stroke='#22c55e' stroke-width='8'"
& " stroke-dasharray='" & Avance & " " & Circ & "'"
& " transform='rotate(-90 45 45)' stroke-linecap='round'/>"
& "<text x='45' y='50' fill='#fff' font-size='18' font-family='Segoe UI'"
& " text-anchor='middle'>" & FORMAT ( Pct, "0%" ) & "</text>"
& "</svg>"La clave es stroke-dasharray='" & Avance & " " & Circ & "': el primer número es cuánto pintar, el segundo el hueco restante. Como Circ = 2 * PI() * R, el anillo siempre cierra exacto sin importar el radio. Cambia R y todo el resto se recalcula solo.
SVG como Data URI: usarlo en tablas e imágenes nativas
Además del visual HTML Content, puedes mostrar el mismo SVG en una columna de tabla o matriz nativa convirtiéndolo en Data URI y marcando la medida como tipo Image URL. Antepones data:image/svg+xml;utf8, a la cadena y Power BI lo trata como una imagen, sin instalar ningún visual.
Barra Como Imagen =
"data:image/svg+xml;utf8,"
& "<svg width='100' height='14' xmlns='http://www.w3.org/2000/svg'>"
& "<rect width='" & INT ( [% Avance] * 100 ) & "' height='14' fill='#38bdf8'/>"
& "</svg>"Tras crear la medida, ve a Herramientas de columna → Categoría de datos → URL de imagen y úsala dentro de una tabla. Este método es 100% nativo (no requiere AppSource), aunque pierde la interactividad del visual HTML Content. Es ideal cuando TI bloquea visuales de terceros pero necesitas barras dentro de una matriz.
Errores comunes y cómo solucionarlos
La mayoría de fallos vienen de comillas mal escapadas, medidas que devuelven BLANK() o coordenadas fuera del viewBox. El visual HTML Content no avisa con un error: simplemente muestra el lienzo en blanco, así que el diagnóstico es visual.
| Síntoma | Causa | Solución |
|---|---|---|
| Lienzo en blanco | La medida devuelve BLANK() o cadena vacía |
Envolver con IF ( ISBLANK(...), "<svg></svg>", ... ) |
| El SVG no se ve, sale texto crudo | Comillas dobles dentro de atributos | Usar comillas simples en el SVG (fill='#fff') |
| El gráfico aparece recortado | Coordenadas mayores que width/height |
Ajustar viewBox o normalizar los valores |
| La barra no cambia | Multiplicas mal el porcentaje | Verificar que [% Avance] está en [0,1], no en [0,100] |
| Se ve borroso al exportar a PDF | Tamaño fijo en px muy pequeño | Aumentar width/height base; el SVG escala sin perder nitidez |
Preguntas frecuentes
¿Necesito saber programar para hacer gráficos HTML en Power BI?
No. Solo necesitas copiar el patrón SVG y cambiar la medida de datos. El SVG es marcado declarativo: defines formas (rect, circle, polyline) con atributos; no hay lógica de programación más allá del DAX que ya conoces.
¿Los gráficos SVG ralentizan el informe? En la práctica no. El SVG es texto que el navegador embebido dibuja como vector; en mis pruebas, una matriz con 200 sparklines rendía igual que una con texto plano. El cuello de botella es el DAX de la serie, no el dibujado.
¿Funciona en Power BI Service y en móvil? El visual HTML Content funciona en Power BI Service. El método Data URI como Image URL en tabla nativa es el más portátil, incluido el visor móvil, porque no depende de ningún visual de AppSource.
¿Puedo usar JavaScript en estos gráficos? La versión «lite» del visual no ejecuta JS por seguridad; la versión completa sí. Para gráficos de datos estáticos, SVG puro es suficiente y más rápido de mantener.
Conclusión
Los gráficos HTML para Power BI te dan minigráficos nítidos y 100% personalizables generando SVG con DAX, sin depender de visuales externos pesados. Con tres patrones —barra de progreso, sparkline y anillo KPI— cubres casi cualquier tablero de KPIs. Empieza por la barra de progreso, que es el patrón más simple, y reutiliza la estructura <svg>…</svg> para el resto.
Si quieres dominar las medidas DAX que alimentan estos gráficos y llevar tus visualizaciones al siguiente nivel, este curso te da el camino completo:
Deja una respuesta