Power BI · Custom Visual
El Gráfico Lipstick
Un custom visual gratuito y de código abierto para Power BI que empaqueta valor real, objetivo, % de completitud y variación en un solo elemento denso y compacto. Nacido en Data Studio — ahora nativo en Power BI.
⬇ Descargar .pbivizVer en GitHub
Click para ampliar · Gráfico Lipstick en Power BI
¿Para qué sirve?
El Gráfico Lipstick está diseñado para cualquiera que necesite comparar el rendimiento real frente a un objetivo a través de múltiples categorías — sin recurrir a una tabla desordenada o un bosque de gráficos de columnas.
Cada fila del gráfico muestra cuatro valores simultáneamente:
- Valor real – renderizado como el relleno de la barra "lipstick".
- Valor objetivo – la marca de referencia.
- % de completitud – el progreso hacia la meta, mostrado numéricamente y mediante la longitud de la barra.
- Variación absoluta – la brecha neta entre real y objetivo, codificada por color como positiva o negativa.
Esto elimina la necesidad de tener por separado una tarjeta KPI, un gráfico de barras y una tabla de datos — todo en un único elemento visual responsivo.
De Data Studio a Power BI
Este visual comenzó su vida como unavisualización de comunidad para Google Data Studio (Looker Studio). Originalmente la construí usando la API DSCC y D3.js para cubrir una necesidad muy específica: una forma de escanear decenas de KPIs de un vistazo en informes directivos sin alternar entre múltiples tipos de gráficos.
Llevarlo a Power BI supuso pasar de un bundle DSCC en JavaScript a un proyecto completo en TypeScript + Power BI SDK, implementando la interfaz IVisual y conectando el panel de formato a través del JSON de capabilities. El resultado es un archivo .pbivizque puedes cargar en cualquier informe de Power BI Desktop en menos de un minuto.
Funciones clave
4 métricas, 1 elemento
Valor real, objetivo, % de avance y variación renderizados en una sola barra compacta — sin necesidad de elementos visuales separados.
Panel de formato
Colores, visibilidad de etiquetas, grosor de barra y espaciado son configurables directamente desde el panel de formato nativo de Power BI.
Diseño responsivo
El visual se adapta a cualquier contenedor — funciona tanto en una tarjeta estrecha como a lo largo de un panel amplio del dashboard.
Soporte multi-categoría
Asigna un campo de dimensión para mostrar una fila por categoría — regiones, productos, canales — todo en una lista con scroll.
Coloración condicional
El color de relleno y de la variación cambia automáticamente dependiendo de si el valor real está por encima o por debajo del objetivo.
Gratis & open-source
Licencia MIT. Descarga el .pbiviz, inspecciona el código en GitHub, haz un fork — sin compromisos.
En acción: dashboard de ejemplo
A continuación se muestra una captura del Gráfico Lipstick utilizado dentro de un dashboard completo en Power BI, junto a otros visuales nativos. Se integra naturalmente junto a tarjetas, filtros y tablas matriciales sin fricción visual.
/assets/imgs/powerbi/lipstick_dashboard.jpgDashboard completo en Power BI usando el Gráfico Lipstick para el análisis de ventas regionales vs objetivo.
Descarga e instalación
Carga el archivo .pbiviz directamente en Power BI Desktop o descarga el informe de ejemplo para verlo funcionando con datos de prueba.
Gráfico Lipstick .pbiviz
El archivo compilado. En Power BI Desktop ve aInsertar → Obtener más objetos visuales → Importar un objeto visual desde un archivoy selecciona este archivo.
⬇ Descargar .pbivizDashboard demo .pbix
Un archivo de reporte completo de Power BI con datos de ejemplo pre-conectados al visual. Ábrelo directamente en Power BI Desktop — no requiere instalación extra.
⬇ Descargar .pbixRepositorio de GitHub
Código fuente completo en TypeScript, instrucciones de build, y el JSON de capabilities. Haz un fork, modifícalo, o envía una PR.
Ver en GitHub →Cómo instalarlo en 60 segundos
- Descarga el archivo
.pbivizusando el botón anterior. - Abre Power BI Desktop y crea o abre un informe.
- En el panel de Visualizaciones haz clic en el menú de tres puntos→ Importar un objeto visual desde un archivo.
- Selecciona el archivo
.pbivizdescargado y confirma la advertencia de seguridad. - El ícono del Gráfico Lipstick aparecerá en tu panel de visualizaciones. Arrástralo al lienzo y asigna tus campos de Categoría, Valory Objetivo.
Más visualizaciones personalizadas
Esto empezó en Data Studio
El gráfico Lipstick es parte de un conjunto más amplio de gráficos personalizados que construí para Google Data Studio (Looker Studio) — Jerarquía de Árbol, Histograma, Gráfico de Cleveland y más.
Ver los gráficos para Data Studio →