Progress Sparkline

The Progress Sparkline displays progress directly inside a cell. You can use it to show completion status, readiness, quota progress, or other ratio-based values without adding a separate chart.

A progress value is treated as a ratio from 0 to 1. For example, 0.37 represents 37%.

SpreadJS worksheet demonstrating Progress Sparklines that visualize ratio-based completion status directly inside cells without requiring separate charts.

Configure a Progress Sparkline

The ProgressSparkline Setting dialog provides the following options:

Setting	Description
Value	Specifies the progress value, cell reference, or supported range expression that resolves to a numeric ratio. Use a ratio from `0` to `1`, such as `0.75` for `75%`.
Mode	Specifies the visual style of the Progress Sparkline.
Bar Color	Sets the color of the completed portion.
Band Color	Sets the color of the remaining portion or track.
Show Value	Shows or hides the percentage text.

By default, Designer uses mode 0, Accent 1 as the bar color, Accent 1 80 as the band color, and shows the percentage text.

Progress Modes

The mode argument specifies the visual style of the Progress Sparkline.

Mode	Name	Description
`0`	Bar Continuous	Horizontal rounded progress bar.
`1`	Bar Striped	Horizontal progress bar with diagonal stripes on the completed portion.
`2`	Bar Segmented	Discrete block segments.
`3`	Ring	Circular progress ring.
`4`	Arc	Semi-circular gauge arc.
`5`	Bar Hatched	Filled bar with a hatched remaining track.
`6`	Bar Bubble	Filled and outlined circles for discrete progress steps.
`7`	Bar Dotted Track	Filled bar with a dotted remaining track.
`8`	Bar Checkbox	Checked and unchecked squares for progress steps.
`9`	Ring Gap	Circular ring with a fixed gap.
`10`	Ring Thick	Thick circular progress ring.
`11`	Ring Ticks	Circular ring with tick marks.
`12`	Ring Dash	Circular ring with dashed progress segments.
`13`	Ring Dots	Circular ring with dotted progress segments.
`14`	Ring Knob	Circular ring with an endpoint dot indicator.

Example

The following example creates Progress Sparklines with different styles and color settings.

var sheet = spread.getActiveSheet();

sheet.setColumnWidth(0, 180);
sheet.setColumnWidth(1, 80);
sheet.setColumnWidth(2, 200);

sheet.getRange(0, 0, 4, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center);

for (var r = 0; r < 4; r++) {
    sheet.setRowHeight(r, 80);
}

// Theme color, literal value, and visible percentage text.
sheet.setValue(0, 0, "Project Delivery");
sheet.setFormula(0, 2, '=PROGRESSSPARKLINE(0.37,1,"Accent 1","Accent 1 80")');

// CSS color, literal value, and hidden percentage text.
sheet.setValue(1, 0, "Release Readiness");
sheet.setFormula(1, 2, '=PROGRESSSPARKLINE(0.37,4,"#8e44ad","#e8d5f5",FALSE)');

// Theme color, cell reference, and visible percentage text.
sheet.setValue(2, 0, "Sales Quota");
sheet.setValue(2, 1, 0.73);
sheet.setFormula(2, 2, '=PROGRESSSPARKLINE(B3,14,"Accent 2","Accent 2 80")');

SpreadJS worksheet showing striped, arc, and ring-knob Progress Sparklines for project delivery, release readiness, and sales quota, using literal values and a cell reference.

Notes

Progress values are interpreted as ratios. Use 0.75 for 75%.
Blank or empty values are displayed as 0.
Values less than 0 are displayed as 0.
Values greater than 1 are displayed as 1.
If the value or mode is invalid, the formula returns #VALUE!.
The Progress Sparkline is formula-driven and is displayed inside the cell that contains the formula.