Visualizing Change Over Time

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

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 (posthog/hogql_queries/insights/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).