Cardinal Chart PCF for Canvas Apps and Custom Pages

Practical setup guide for a Power Apps PCF chart control with JSON modes, duplicate handling, and Power Fx event integration.

Harllens George | 2026-02-15

Cardinal Chart is a Microsoft Power Platform component built with the Power Apps Component Framework (PCF). It renders an XY curve from JSON, with predictable ordering rules, duplicate handling, and clean Power Fx integration for hover and selection.

It is built for real delivery scenarios where charts must behave consistently across Canvas Apps and Custom Pages.

What this component is

This is a reusable PCF chart component for Power Apps teams that need a lightweight XY curve control with clear JSON contracts and predictable behavior in app logic.

Who it is for

  • Power Platform developers building Canvas Apps and Custom Pages
  • Teams shipping PCF controls with documented JSON contracts
  • Consultants and internal product teams that need stable chart behavior in delivery work

Get it

Compatibility

  • Microsoft Power Platform, Power Apps Canvas Apps, and Custom Pages
  • JSON input via seriesJson with Power Fx for binding and event handling
  • Practical default render limit starts at maxPointsToRender = 2000 for safe app behavior

Common use cases

  • Trend lines and KPIs where point order matters
  • Time series where duplicates must be allowed or rejected on purpose
  • Interactive charts where selecting a point drives app logic (filters, details, navigation)

Quick start

  1. Add the control to a Canvas App or Custom Page.
  2. Bind seriesJson to compact JSON text.
  3. Start with safe defaults:
    • orderingMode = "input_order"
    • duplicatePolicy = "allow"
    • hoverValueLabelEnabled = true
    • showPoints = true
    • maxPointsToRender = 2000
  4. Wire component actions:
    • onHoverChanged
    • onSelectionChanged

Basic JSON (array)

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

Advanced JSON (object)

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

Notes:

  • mode and duplicatePolicy inside JSON override the component properties.
  • Legacy t is supported as an alias for x.

Power Fx example

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 and duplicates

Mode What it does
input_order Preserves input order. If index is present, it orders by index.
x_ascending Sorts points by x ascending.
x_ascending_unique Sorts by x and enforces unique x values.
x_strict Requires input to already be strictly increasing by x.

Duplicate policy (used for sorted modes):

  • allow: keep duplicates
  • error: reject duplicates
  • keep_first: keep first point in each duplicate group
  • keep_last: keep last point in each duplicate group

Examples (screenshots)

Example 1: index-driven input order

Index-driven output example for Cardinal Chart PCF.

Example 2: X-ascending output

Sorted X output example for Cardinal Chart PCF.

Events and outputs

Component actions:

  • onHoverChanged
  • onSelectionChanged

Useful outputs:

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

Example:

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

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

Troubleshooting (fast)

  • Invalid mode '...': use input_order, x_ascending, x_ascending_unique, or x_strict.
  • Invalid duplicatePolicy '...': use allow, error, keep_first, or keep_last.
  • Empty chart: ensure every point has finite numeric x and y.
  • x_strict validation error: sort first or switch to x_ascending.

Links