Progress

Best Practices

Provide a value for progress. If no value is provided, the display value will default to --%. Provide an accessible label. If there's a chance your value could be undefined, account for that in your label.

Examples

Goal progress

When using a goal and subgoal:

• If the goal is met or exceeded, the progress color will be green.
• If the value falls between the goal and subgoal, the progress color will be yellow.
• If the value is below the subgoal, the progress color will be red, and the display value will be bold.

Provide either goal with subgoal or color. Don't provide color and goal with subgoal. Don't use the metricOnly or inverted flags.

Custom progress

When using a color from the supported colors list: red, yellow, green, blue.

Provide either goal with subgoal or color. Don't provide color and goal with subgoal. Don't use the metricOnly or inverted flags.

Metric only and inverted progress

Metrics only progress is meant for inverted goals (descending towards 0% instead of ascending towards 100%) and metrics for which a percentage circular progress chart does not make logical sense.

Provide a goal and the metricOnly flag to display progress without a circular chart. If the goal is an inverted goal, use the inverted flag.

Do not use color or subgoal with the metricOnly and inverted flags.

Empty progress

Provide a value for progress. If no value is provided, the display value will default to --%. Provide an accessible label. If there's a chance your value could be undefined, account for that in your label.