Line Chart

Clean animated line chart with smooth cubic Bézier curves, subtle area gradient, and auto-scaling Y-axis. 1 control, 10 properties. Renders entirely in a single Image control via data:image/svg+xml.

cmpLineChart.yaml

1. Go to the Components tab (right side panel, next to Screens)
2. Click New component — this creates a blank component
3. Click outside the new component to deselect it
4. Paste the YAML with Ctrl+V / ⌘V

Preview

Installation

This component requires Modern controls to be enabled. Settings → Updates → Preview → Modern controls and themes

If your users are in a comma-decimal region, wrap the numbers

This chart draws with an SVG built by string concatenation, and Power Fx & converts numbers using the viewer’s locale. In regions that write 123,45 rather than 123.45, SVG reads that comma as a separator between two numbers and the path coordinates and the Bézier control points silently fail to draw. Axes and labels still render, because whole numbers are unaffected.

The fix is to format explicitly at the point of concatenation. In this component that means path coordinates and the Bézier control points:

- Concat(Filter(pts, i > 1), " L " & px & " " & py)

+ Concat(Filter(pts, i > 1), " L " & Text(px, "[$-en-US]0.##") & " " & Text(py, "[$-en-US]0.##"))

Do not repair the finished string with Substitute(s, ",", "."). That also rewrites thousands separators in your labels, turning 1,420 into 1.420, and breaks comma-separated font stacks.

# In Power Apps Studio:
1. Components tab → New component → Import from code
2. Paste the full YAML definition
3. Add the component to any screen
4. Press F5 (Preview) to trigger the draw animation

Usage

Basic line chart

// One row per point: x (ordinal), y (value), label (x-axis text)
cmpLineChart.ChartData = Table(
    { x: 1, y: 142000, label: "Jan" },
    { x: 2, y: 118000, label: "Feb" },
    { x: 3, y: 165000, label: "Mar" },
    { x: 4, y: 134000, label: "Apr" },
    { x: 5, y: 152000, label: "May" },
    { x: 6, y: 189000, label: "Jun" }
)

cmpLineChart.ChartTitle = "Monthly Spend"

Dynamic data from data source

// Shape data into x + y + label rows
cmpLineChart.ChartData =
    AddColumns(
        GroupBy(SalesData, "Month", "Sales"),
        "x", Value(Month),
        "y", Sum(Sales, Amount),
        "label", Text(Date(Year(Today()), Value(Month), 1), "mmm")
    )

cmpLineChart.ChartTitle = "Revenue Trend"
cmpLineChart.LineColor = "#10B981"

Dark theme with value labels

cmpLineChart.Theme = "Dark"
cmpLineChart.ShowPointLabels = true
cmpLineChart.LineColor = "#8B5CF6"
cmpLineChart.ChartTitle = "Support Tickets"

Properties

Input

Property	Type	Default
`ChartData` Table with x (number), y (number), and label (text) columns. Auto-sorted by x. The label column is used directly for the X-axis.	Table	12-month sample
`ChartTitle` Title text rendered at the top-left of the chart.	Text	"Monthly Spend"
`LineColor` Hex color for the line and area gradient.	Text	"#3B82F6"
`LineWidth` Thickness of the line in pixels.	Number	2
`Smooth` Use a smooth curve (true) or straight line segments (false).	Boolean	true
`AreaFill` Show the gradient area fill beneath the line.	Boolean	true
`ShowPoints` Show circle markers at each data point.	Boolean	false
`ShowGrid` Show dashed horizontal grid lines.	Boolean	true
`ShowPointLabels` Show the formatted value above each data point.	Boolean	false
`ShowTitle` Show the ChartTitle text.	Boolean	true
`Theme` "Light" or "Dark". Controls background, axes, grid, and label colors.	Text	"Light"
`ValuePrefix` Text before each Y-axis and point value, e.g. "$". Set to "" for non-currency data.	Text	"$"
`ValueSuffix` Text after each value, e.g. "%" or " users".	Text	""
`Animate` Enable line draw animation with staggered label fade-in.	Boolean	true
`AnimationDuration` Duration of the line draw animation in seconds.	Number	1.2

No output properties or events. 15 input properties total.

Data Schema

ChartData record

Field	Type	Notes
x	Number	Ordinal position on the X-axis. Data is auto-sorted by x ascending.
y	Number	Numeric value. Y-axis auto-scales from 0 to a rounded ceiling with 15% headroom (prefix/suffix via ValuePrefix/ValueSuffix).
label	Text	X-axis label, shown directly on the axis beneath each point.

Implementation Details

Single-control SVG rendering

The entire chart is a single Image control generating a data:image/svg+xml URI. ViewBox is 700 × 320 with 50px padding on all sides.

Cubic Bézier curves

The line uses SVG C (cubic Bézier) commands. Control points are placed at &frac13; of the horizontal distance between consecutive points, with Y values matching each endpoint. This produces smooth transitions without the overshoot that quadratic T-curves cause on volatile data.

Subtle area gradient

A built-in vertical linearGradient fills from LineColor at 12% opacity to transparent at the baseline. This is always on and adapts to the line color automatically.

Auto-scaling Y-axis

Y-axis always starts at $0 and auto-scales to a clean ceiling (115% of max, rounded to the nearest magnitude interval). Labels use $K formatting (e.g. $0, $50K, $100K). Point labels use the same format.

Animation system

Two CSS @keyframes:draw (stroke-dashoffset 1→0 for the line) andfade (opacity 0→1 for the area fill and point labels). The line uses pathLength="1" so dasharray/offset work regardless of actual path length. Point labels stagger at 40ms intervals.

Limitations

Single series only — for multi-series use the area chart component. No interactive tooltips (inline SVG in Image controls doesn't support hover). Y-axis always starts at 0; negative values are not supported. Empty state renders a centered “No data” message.

Examples

Default: Monthly spend

cmpLineChart.ChartData = Table(
    {x:1,y:142000,label:"Jan"},
    {x:2,y:118000,label:"Feb"},
    ...
    {x:12,y:198000,label:"Dec"}
)
cmpLineChart.ChartTitle = "Monthly Spend"

Dark theme: Revenue growth (green)

cmpLineChart.Theme = "Dark"
cmpLineChart.LineColor = "#10B981"
cmpLineChart.ChartTitle = "Revenue Growth"

With value labels (purple)

cmpLineChart.ShowPointLabels = true
cmpLineChart.LineColor = "#8B5CF6"
cmpLineChart.ChartTitle = "Support Tickets"

Architecture

1 control — a single Image control rendering an inline SVG via EncodeUrl().

10 properties — all input. No output properties or events.

Default size — App.Width × 400px. SVG viewBox is 700 × 320.

cmpLineChart (App.Width × 400, Fill: transparent)
└── imgLineChart (Image control)
    └── Image = "data:image/svg+xml," & EncodeUrl(svg)

    SVG structure (viewBox 700×320, padding 50):
    ├── <style> @keyframes draw, fade (conditional on Animate)
    ├── <defs>
    │   └── <linearGradient id="aG"> (LineColor at 12% → transparent)
    ├── <text> ChartTitle (top-left, conditional on ShowTitle)
    ├── Grid lines × 4 (dashed, conditional on ShowGrid)
    ├── Axes: Y-axis + X-axis baseline (stroke-width 1)
    ├── Y-axis labels × 6 (formatted as $0, $50K, $100K…)
    ├── X-axis labels per point (Month | FromLabel | Index mode)
    ├── <path> Area fill (cubic Bézier + close to baseline, 12% opacity)
    ├── <path> Line (cubic Bézier C commands, stroke-width 2)
    └── <text> Point labels × n (conditional on ShowPointLabels)
        └── class="lbl" animation-delay staggered at 40ms

Get new components and templates when they drop

One email when something new ships. Unsubscribe anytime.

Community

Use the toolbar to format · or type markdown directly