Gauge / progress-to-target insight display type (actuals vs plan)
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 39.9k
- Forks
- 3.4k
- Avg merge
- 6h 51m
- Merged PRs (30d)
- 232
Description
Is your feature request related to a problem?
People tracking actuals vs plan (revenue vs quota, signups vs goal) have no way to see "% of target" as a single visual in insights. Goal lines only overlay time-series charts, the number (BoldNumber) view has no target concept, and pie charts show share of a whole rather than a value against a target. This request comes up regularly.
Describe the solution you'd like
A new insight display type (for example Progress, or a gauge) for single-value trends and SQL number insights. It renders the aggregate against a target as a filled bar or radial ring with a "% of target" label.
A design suggestion to keep it cheap: reuse the existing goal-line value as the target. Read the first GoalLine.value off TrendsFilter.goalLines instead of adding a new field, so there's no new schema or editor, and the goal-line label doubles as the gauge label.
Scope looks frontend-only:
- Trends already return the single
aggregated_valuethat the number view reads, so no backend query change. - New renderer alongside
BoldNumber(frontend/src/scenes/insights/views/BoldNumber/). - One
ChartDisplayTypeenum value (frontend/src/types.ts), a picker entry inChartFilter.tsx, a dispatch branch inTrends.tsx, and extending the goal-line display gate to the new type. - Ship behind a feature flag.
A bar or ring version is small. A full semicircular dial is larger, because no charting library currently in use (Chart.js, quill-charts) supports partial arcs out of the box.
Describe alternatives you've considered
Workarounds available today:
- Trend chart with a goal line: a dashed target line on a line/bar/area chart. Closest option now, but it needs a time series and can't render a single "% of target" figure.
- HogQL number insight: a SQL insight computing
round(100.0 * actual / target, 1)shown with the Number display. Gives the figure, but no visual fill and no % sign.
Neither gives a glanceable gauge or progress visual.
Additional context
Reusable building blocks already exist but aren't wired into insights:
LemonProgress(linear bar) andLemonProgressCircle(radial ring, already used in experimentsRunningTime).- quill
PieChartdonut mode withcenterLabel(seeproducts/mcp_analyticsHarnessDonut). - The billing
BillingGaugebar.
Debug info
- [x] PostHog Cloud (US) — product enhancement request, not version-specific
- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit:
- [ ] PostHog self-hosted with Kubernetes
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with frontend/src/types.ts, ChartFilter.tsx, Trends.tsx, and the existing renderer under frontend/src/scenes/insights/views/BoldNumber/. Review LemonProgress and LemonProgressCircle, then trace how TrendsFilter.goalLines and aggregated_value reach the number view. Done means a feature-flagged display type renders actuals against the first goal-line value and is selectable in the picker without backend changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- analytics, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100