Cardinal Chart PCF fuer Canvas Apps und Custom Pages

Praxisleitfaden fuer ein Power Apps PCF Chart Control mit JSON Modi, Duplikatregeln und Power Fx Event Integration.

Harllens George | 2026-02-15

Cardinal Chart ist eine Microsoft Power Platform Komponente auf Basis des Power Apps Component Framework (PCF). Sie rendert eine XY Kurve aus JSON, mit vorhersehbaren Sortierregeln, kontrolliertem Duplikat Handling, und sauberer Power Fx Integration fuer Hover und Auswahl.

Es ist fuer reale Delivery Szenarien gedacht, in denen Charts konsistent in Canvas Apps und Custom Pages funktionieren muessen.

Was diese Komponente ist

Ein wiederverwendbares PCF Chart Control fuer Power Apps Teams, die eine leichte XY Kurve mit klarem JSON Vertrag und stabilem Verhalten in der App Logik brauchen.

Fuer wen es gedacht ist

  • Power Platform Entwickler fuer Canvas Apps und Custom Pages
  • Teams, die PCF Controls mit dokumentierten JSON Vertraegen liefern
  • Consultants und interne Produktteams mit Fokus auf stabile Delivery

Get it

Kompatibilitaet

  • Microsoft Power Platform, Power Apps Canvas Apps, und Custom Pages
  • JSON Input ueber seriesJson mit Power Fx fuer Binding und Events
  • Praktischer Startwert fuer Rendering ist maxPointsToRender = 2000

Typische Use Cases

  • Trends und KPIs, bei denen die Punktreihenfolge wichtig ist
  • Zeitreihen, bei denen Duplikate bewusst erlaubt oder abgelehnt werden sollen
  • Interaktive Charts, bei denen ein Klick weitere App Logik ausloest (Filter, Details, Navigation)

Quick Start

  1. Control in eine Canvas App oder Custom Page einfuegen.
  2. seriesJson an kompakte JSON Text Payload binden.
  3. Mit sicheren Defaults starten:
    • orderingMode = "input_order"
    • duplicatePolicy = "allow"
    • hoverValueLabelEnabled = true
    • showPoints = true
    • maxPointsToRender = 2000
  4. Component Actions verdrahten:
    • onHoverChanged
    • onSelectionChanged

JSON Basis (Array)

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

JSON Advanced (Object)

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

Hinweise:

  • mode und duplicatePolicy im JSON ueberschreiben die Component Properties.
  • Legacy t wird als Alias fuer x unterstuetzt.

Power Fx Beispiel

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
  )
);

Ordering Modes und Duplikate

Mode Verhalten
input_order Input Reihenfolge bleibt. Wenn index vorhanden ist, wird nach index geordnet.
x_ascending Sortiert nach x aufsteigend.
x_ascending_unique Sortiert nach x und erzwingt eindeutige x Werte.
x_strict Input muss bereits strikt aufsteigend nach x sein.

Duplicate Policy (fuer sortierte Modes):

  • allow: Duplikate behalten
  • error: Duplikate ablehnen
  • keep_first: erstes Element je Duplikatgruppe behalten
  • keep_last: letztes Element je Duplikatgruppe behalten

Beispiele (Screenshots)

Beispiel 1: Index-getriebene Reihenfolge

Index-driven Output Beispiel fuer Cardinal Chart PCF.

Beispiel 2: X-ascending Output

Sorted X Output Beispiel fuer Cardinal Chart PCF.

Events und Outputs

Component Actions:

  • onHoverChanged
  • onSelectionChanged

Nuetzliche Outputs:

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

Beispiel:

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

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

Troubleshooting (kurz)

  • Invalid mode '...': input_order, x_ascending, x_ascending_unique, oder x_strict.
  • Invalid duplicatePolicy '...': allow, error, keep_first, oder keep_last.
  • Leerer Chart: sicherstellen dass jeder Punkt finite numerische x und y Werte hat.
  • x_strict Fehler: Daten sortieren oder auf x_ascending wechseln.

Links

  • GitHub Repository: Just-Boring-Cat/cardinal-chart-pcf
  • PCF Gallery: Publish Ziel ist https://pcf.gallery/ (dieser Leitfaden wird aktualisiert sobald das Listing live ist)