Create Progress chart

Everything you need to know to create the chart you want.

Overview

Progress (Solid gauges) display progress against a target using a circular arc. Think of them as minimalist speedometers for KPIs.

When to use it

  • Highlighting a single metric vs. goal (e.g., completion rate, NPS).

  • Creating dashboard tiles where quick status recognition matters.

  • Showing a range with clear minimum/maximum thresholds.

Avoid gauges when comparing many categoriesβ€”use bar charts or sparklines instead.

Data requirements

  • Single numeric value.

  • Works best with percentages or values bounded between min and max.

Style options available

Group
Control
Input type
Options
Description

Colors

Color palette

palette

β€”

Palette applied to series; sets the default colours for the chart.

General β†’ Progress

Inner size, %

text

β€”

Inner radius of the filled gauge arc.

General β†’ Progress

Rounded ends

boolean

β€”

Rounds the ends of the solid gauge arc for a pill-shaped look.

General β†’ Background

Inner size, %

text

β€”

Inner radius of the gauge background ring.

General β†’ Background

Start angle, deg

number

β€”

Angle where the gauge arc begins, in degrees.

General β†’ Background

End angle, deg

number

β€”

Angle where the gauge arc ends, in degrees.

General β†’ Background

Type

select

circle, arc

Shape used for the gauge pane (e.g., solid arc).

General β†’ Background

Color

color

β€”

Colour of the gauge background ring.

Title β†’ Chart title

Font name

text

β€”

Font family used for titles, labels, or legend text.

Title β†’ Chart title

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Title β†’ Chart title

Font size

number

β€”

Font size in pixels for the selected text element.

Title β†’ Chart title

Font color

color

β€”

Colour of the text shown for this element.

Title β†’ Chart title

Margin bottom

number

β€”

Extra space below chart titles or subtitles in pixels.

Title β†’ Chart subtitle

Font name

text

β€”

Font family used for titles, labels, or legend text.

Title β†’ Chart subtitle

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Title β†’ Chart subtitle

Font size

number

β€”

Font size in pixels for the selected text element.

Title β†’ Chart subtitle

Font color

color

β€”

Colour of the text shown for this element.

🎯 Tip: Pair the progress with a concise subtitle (β€œGoal: 85%”) to give readers instant context.

Have problems or want to improve this chart type?

Ping us via [email protected].

Last updated

Was this helpful?