Visualizing change over time
When a request is about how something changed, the default reach is a line/area
trend — and that is usually right for a continuous series with many x points. But for
some change-over-time shapes a different chart reads far better. This skill is the
menu to offer, including the slope graph, when building visualizations with
@posthog/quill-charts.
Present the fitting option(s) and let the user choose — none of these is mandatory.
Pick by the shape of the change
| The change is… |
Reach for |
Why |
| A continuous series over many time points (a trend) |
TimeSeriesLineChart / LineChart (area fill for emphasis) |
The standard trend; the slope between every pair of points is visible. |
| Two points only (before → after) across several series/categories |
SlopeChart |
One line per entity from a left "before" to a right "after" — direction and magnitude of each entity's change, and rank flips, read at a glance. |
| Magnitude comparison at points in time (not the path between them) |
BarChart / TimeSeriesBarChart |
Bars compare discrete values; group/stack for sub-series. |
| A single headline number plus its change vs a prior period |
MetricCard |
Big number + sparkline + change pill. |
If the user is comparing exactly two snapshots (this week vs last, control vs
treatment, Q1 vs Q2) and especially when there are many categories whose
relative movement matters, offer the slope graph as the cleaner alternative to a
grouped bar or a 2-point line chart.
Using the SlopeChart
import { SlopeChart } from '@posthog/quill-charts'
import type { Series } from '@posthog/quill-charts'
import type { SlopeSeriesMeta } from '@posthog/quill-charts'
// One series per entity; `data` is exactly [start, end].
const series: Series<SlopeSeriesMeta>[] = [
{ key: 'us', label: 'US', data: [120, 185] },
{ key: 'eu', label: 'EU', data: [200, 150] },
]
<SlopeChart
series={series}
labels={['Before', 'After']}
theme={theme}
config={{
showSeriesLabels: true, // name beside each end point; steepest line always keeps its label
legend: { show: true }, // each row shows the color, label, and the formatted change
deltaFormatter: (d) => `${d >= 0 ? '+' : ''}${d}`,
}}
/>
Key options (full list in the charts
docs/chart-types.md "SlopeChart" section):
showStartLabels / showEndLabels — chart-level defaults for the value labels;
override per series with meta.showStartLabel / meta.showEndLabel.showSeriesLabels — the name labels; on collision the series with the largest
change (|end − start|) always keeps its label.legend: { show, position } — rows carry the per-series change (deltaFormatter).- The value axis is hidden by default — the start/end labels are the readout.
The theme comes from useChartTheme(); give the wrapper a real height. See the
charts AGENTS.md for theme wiring and sizing.
Scope note
There are two ways to render a slope graph; which you reach for depends on the surface:
SlopeChart — the @posthog/quill-charts component. Use it when building UI
directly: dashboards, reports, the mcp_analytics frontend, custom visualizations.
It backs the Slope view toggle on Max's inline trends result card
(services/mcp/src/ui-apps/components/TrendsVisualizer.tsx).ChartDisplayType.SlopeGraph — a first-class insight display (value
'SlopeGraph' in frontend/src/types.ts), rendered by the backend
SlopeGraphTrendsQueryRunner
(products/product_analytics/backend/hogql_queries/trends/slope_graph_trends_query_runner.py). It
takes a TrendsQuery and keeps the first and last bucket of the date range as
the two slope points (the last segment is dashed when it's the current,
still-accumulating period). Set it via trendsFilter.display: "SlopeGraph"
(trends-only).
- The product insight editor includes the slope graph picker entry.
- Via the API /
posthog:insight-create MCP tool, pass a TrendsQuery with
trendsFilter.display: "SlopeGraph". To frame a clean before-and-after, choose
the date range and interval so the first bucket is your baseline and the last is
"now" (e.g. monthly buckets starting from the baseline month).
1---2name: visualizing-change-over-time3description: Helps PostHog engineers and agents pick the right chart when a request is about visualizing change over time, before/after comparisons, or period-over-period movement while building UI with @posthog/quill-charts (dashboards, reports, the mcp_analytics frontend, custom visualizations). Use when a user asks how something "changed", "moved", "grew", "dropped", "improved", or "regressed" between two points or periods, or mentions "before/after", "period over period", "week over week", "delta", "slope graph", "slopegraph", or comparing many series across two snapshots. Surfaces both the `SlopeChart` quill component and the native `ChartDisplayType.SlopeGraph` insight display as options.4---56# Visualizing change over time78When a request is about **how something changed**, the default reach is a line/area9trend — and that is usually right for a continuous series with many x points. But for10some change-over-time shapes a different chart reads far better. This skill is the11menu to offer, including the **slope graph**, when building visualizations with12[`@posthog/quill-charts`](../../../packages/quill/packages/charts/AGENTS.md).1314Present the fitting option(s) and let the user choose — none of these is mandatory.1516## Pick by the shape of the change1718| The change is… | Reach for | Why |19| ------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |20| A continuous series over many time points (a trend) | `TimeSeriesLineChart` / `LineChart` (area fill for emphasis) | The standard trend; the slope between every pair of points is visible. |21| **Two points only** (before → after) across **several series/categories** | **`SlopeChart`** | One line per entity from a left "before" to a right "after" — direction and magnitude of each entity's change, and rank flips, read at a glance. |22| Magnitude comparison at points in time (not the path between them) | `BarChart` / `TimeSeriesBarChart` | Bars compare discrete values; group/stack for sub-series. |23| A single headline number plus its change vs a prior period | `MetricCard` | Big number + sparkline + change pill. |2425If the user is comparing exactly **two snapshots** (this week vs last, control vs26treatment, Q1 vs Q2) and especially when there are **many categories** whose27_relative_ movement matters, offer the slope graph as the cleaner alternative to a28grouped bar or a 2-point line chart.2930## Using the SlopeChart3132```tsx33import { SlopeChart } from '@posthog/quill-charts'34import type { Series } from '@posthog/quill-charts'35import type { SlopeSeriesMeta } from '@posthog/quill-charts'3637// One series per entity; `data` is exactly [start, end].38const series: Series<SlopeSeriesMeta>[] = [39 { key: 'us', label: 'US', data: [120, 185] },40 { key: 'eu', label: 'EU', data: [200, 150] },41]4243<SlopeChart44 series={series}45 labels={['Before', 'After']}46 theme={theme}47 config={{48 showSeriesLabels: true, // name beside each end point; steepest line always keeps its label49 legend: { show: true }, // each row shows the color, label, and the formatted change50 deltaFormatter: (d) => `${d >= 0 ? '+' : ''}${d}`,51 }}52/>53```5455Key options (full list in the charts56[docs/chart-types.md](../../../packages/quill/packages/charts/src/docs/chart-types.md) "SlopeChart" section):5758- `showStartLabels` / `showEndLabels` — chart-level defaults for the value labels;59 override per series with `meta.showStartLabel` / `meta.showEndLabel`.60- `showSeriesLabels` — the name labels; on collision the series with the **largest61 change** (`|end − start|`) always keeps its label.62- `legend: { show, position }` — rows carry the per-series change (`deltaFormatter`).63- The value axis is hidden by default — the start/end labels are the readout.6465The theme comes from `useChartTheme()`; give the wrapper a real height. See the66charts AGENTS.md for theme wiring and sizing.6768## Scope note6970There are **two** ways to render a slope graph; which you reach for depends on the surface:7172- **`SlopeChart`** — the `@posthog/quill-charts` component. Use it when building UI73 directly: dashboards, reports, the `mcp_analytics` frontend, custom visualizations.74 It backs the **Slope** view toggle on Max's inline trends result card75 (`services/mcp/src/ui-apps/components/TrendsVisualizer.tsx`).76- **`ChartDisplayType.SlopeGraph`** — a first-class insight display (value77 `'SlopeGraph'` in `frontend/src/types.ts`), rendered by the backend78 `SlopeGraphTrendsQueryRunner`79 (`products/product_analytics/backend/hogql_queries/trends/slope_graph_trends_query_runner.py`). It80 takes a `TrendsQuery` and keeps the **first and last bucket** of the date range as81 the two slope points (the last segment is dashed when it's the current,82 still-accumulating period). Set it via `trendsFilter.display: "SlopeGraph"`83 (trends-only).84 - The **product insight editor** includes the slope graph picker entry.85 - Via the **API / `posthog:insight-create` MCP tool**, pass a `TrendsQuery` with86 `trendsFilter.display: "SlopeGraph"`. To frame a clean before-and-after, choose87 the date range and `interval` so the first bucket is your baseline and the last is88 "now" (e.g. monthly buckets starting from the baseline month).
posthog