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

# 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