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 .pbiviz Ver 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 una visualizació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 .pbiviz
que 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.jpg Dashboard 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 a Insertar → Obtener más objetos visuales → Importar un objeto visual desde un archivo y 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, Valor y 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 →