Cardinal Chart PCF para Canvas Apps y Custom Pages

Guia practica para un control PCF de Power Apps con modos JSON, manejo de duplicados e integracion de eventos con Power Fx.

Harllens George | 2026-02-15

Ejemplo de Cardinal Chart con orden por indice y propiedades de Power Apps.
Captura del proyecto: el orden por indice conserva la secuencia de entrada, incluidos los valores X repetidos. Fuente de la imagen. The Boring Cat. Captura existente del proyecto; imagen sin modificar.

Cardinal Chart es un componente de Microsoft Power Platform construido con Power Apps Component Framework (PCF). Renderiza una curva XY desde JSON, con reglas de orden claras, manejo de duplicados, e integracion con Power Fx para hover y seleccion.

Esta pensado para escenarios reales donde el grafico debe comportarse de forma consistente en Canvas Apps y Custom Pages.

Que es este componente

Es un componente PCF reutilizable para equipos de Power Apps que necesitan una curva XY ligera con contrato JSON claro y comportamiento predecible dentro de la logica de la app.

Para quien es

  • Desarrolladores de Power Platform que trabajan con Canvas Apps y Custom Pages
  • Equipos que publican componentes PCF con contratos JSON documentados
  • Consultores y equipos de producto que necesitan estabilidad en entrega

Get it

Compatibilidad

  • Microsoft Power Platform, Power Apps Canvas Apps y Custom Pages
  • Entrada JSON mediante seriesJson con Power Fx para binding y eventos
  • Limite practico inicial de render con maxPointsToRender = 2000

Casos de uso comunes

  • Tendencias y KPIs donde el orden de los puntos importa
  • Series de tiempo donde los duplicados se deben permitir o rechazar de forma intencional
  • Graficos interactivos donde un clic dispara logica de la app (filtros, detalles, navegacion)

Inicio rapido

  1. Agrega el control a una Canvas App o Custom Page.
  2. Vincula seriesJson a un texto JSON compacto.
  3. Empieza con valores seguros:
    • orderingMode = "input_order"
    • duplicatePolicy = "allow"
    • hoverValueLabelEnabled = true
    • showPoints = true
    • maxPointsToRender = 2000
  4. Conecta acciones del componente:
    • onHoverChanged
    • onSelectionChanged

JSON basico (array)

[
  { "x": 0, "y": 1.23, "label": "Start" },
  { "x": 1, "y": 1.1 }
]

JSON avanzado (object)

{
  "mode": "x_ascending_unique",
  "duplicatePolicy": "error",
  "points": [
    { "x": 1, "y": 1.1 },
    { "x": 0, "y": 1.23 }
  ]
}

Notas:

  • mode y duplicatePolicy dentro del JSON tienen prioridad sobre las propiedades del componente.
  • Se soporta t como alias de x.

Ejemplo Power Fx

Set(
  varSeriesJson,
  JSON(
    {
      mode: "x_ascending",
      duplicatePolicy: "keep_last",
      points: Table(
        { x: 1, y: 1.23, label: "Start" },
        { x: 1, y: 1.10, label: "Adjusted" },
        { x: 2, y: 1.44 }
      )
    },
    JSONFormat.Compact
  )
);

Modos de orden y duplicados

Modo Que hace
input_order Mantiene el orden de entrada. Si existe index, ordena por index.
x_ascending Ordena por x ascendente.
x_ascending_unique Ordena por x y exige x unico.
x_strict Requiere que la entrada ya este en orden estrictamente ascendente por x.

Politica de duplicados (para modos ordenados):

  • allow: mantiene duplicados
  • error: rechaza duplicados
  • keep_first: conserva el primero de cada grupo
  • keep_last: conserva el ultimo de cada grupo

Ejemplos (capturas)

Ejemplo 2: salida ordenada por X

Ejemplo de salida sorted X para Cardinal Chart PCF.

Eventos y salidas

Acciones del componente:

  • onHoverChanged
  • onSelectionChanged

Salidas utiles:

  • Hover: hoveredX, hoveredY, hoveredPointIndex, hoveredPointJson
  • Seleccion: selectedX, selectedY, selectedPointIndex, selectedPointJson

Ejemplo:

// CurveChart1.onSelectionChanged
Set(varSelectedPointJson, CurveChart1.selectedPointJson);

// CurveChart1.onHoverChanged
Set(varHoveredPointJson, CurveChart1.hoveredPointJson);

Troubleshooting (rapido)

  • Invalid mode '...': usa input_order, x_ascending, x_ascending_unique, o x_strict.
  • Invalid duplicatePolicy '...': usa allow, error, keep_first, o keep_last.
  • Grafico vacio: valida que cada punto tenga x y y numericos finitos.
  • Error en x_strict: ordena primero o cambia a x_ascending.

Enlaces

  • Repositorio GitHub: Just-Boring-Cat/cardinal-chart-pcf
  • PCF Gallery: objetivo de publicacion https://pcf.gallery/ (esta guia se actualizara cuando el listing este activo)