Create a gauge chart

A gauge shows one value against colored ranges, such as spending as a percentage of your budget.

Example 1: Multi-zone gauge #

• Purpose: Track metrics across different levels (e.g., low, moderate, high).
• Setup: Adjust the number of zones, set custom ranges, and color-code each zone.
• Use Case: Monitor monthly marketing spending with green for low, yellow for moderate, and red for high to stay within budget.

Example 2: Single-zone gauge #

• Purpose: Simple tracking for single-target metrics.
• Setup: Use one zone with a Value Suffix (e.g., %) and customize the Pointer Color and optional Progress Bar.
• Use Case: Track progress toward a monthly goal.

Create a gauge #

1. Open Grafly > Chart, choose gauge as the type, and enter your title.
2. Open Settings and use the Gauge tab. Enter the number you want to display in Actual Value and add a description.
3. Set the Number of Zones, then enter each zone’s start and end values and choose its color. The actual value must fall within the gauge’s overall range.
4. Add a Value Suffix, such as %, if needed. Choose the pointer color and whether to show axis markings or a progress bar.
5. Click Generate Chart and inspect the HTML result in your browser. The older videos above label this action Create Chart.

For a percentage gauge showing 70%, use an Actual Value of 70 with zones 0-60, 60-80 and 80-100, then set the suffix to %. The suffix adds a label; it does not convert 0.7 into 70.