You're shipping features every day, but how do you know if users are actually engaging with them? PostHog captures every user interaction as an event, but raw event data becomes noise without visualization. Let's walk through surfacing event volume in ways that actually tell a story.

Set Up Event Capture

Before you visualize anything, you need events flowing into PostHog. The JavaScript SDK makes this straightforward.

Initialize the PostHog SDK

Install the posthog-js package and initialize it in your app's entry point. Replace YOUR_PROJECT_API_KEY with your actual key from Project Settings.

javascript

import posthog from 'posthog-js'

posthog.init('YOUR_PROJECT_API_KEY', {
  api_host: 'https://us.posthog.com',
  persistence: 'localStorage+cookie',
})

Initialize PostHog with your project API key

Capture Events on User Actions

Use posthog.capture() to record events. Be consistent with event naming—snake_case is conventional. Add properties to provide context; PostHog uses these for filtering and segmentation.

javascript

// Capture a basic event
posthog.capture('feature_viewed')

// Capture with properties
posthog.capture('pricing_page_viewed', {
  plan_type: 'pro',
  source: 'navigation_menu',
})

Capture events with optional properties

Verify Events Are Arriving

Check the Live Events tab in PostHog to confirm events are being captured. You should see them appear in real-time within seconds.

javascript

// Trigger a test event from your console
posthog.capture('test_event', { timestamp: new Date().toISOString() })

Quick test to verify event capture

Tip: Avoid capturing too many events—only track user actions, not every page render. This keeps your event volume meaningful and your quota usage reasonable.

Visualize Event Volume with Trends

Now that events are flowing in, use PostHog's Trends visualization to see volume over time.

Create a New Trends Insight

Click Insights in the sidebar, then New, and select Trends as your visualization type.

Select Your Event

Under Events, click the dropdown and choose the event you want to track—for example, pricing_page_viewed. PostHog will display a volume graph over the selected time period.

Add Filters and Breakdowns

Use Filter to narrow results by user properties or event attributes. Use Breakdown to slice volume by a dimension—like plan type or browser—to see which segments are driving volume.

javascript

// When you add a breakdown by 'plan_type' in the UI,
// PostHog returns grouped data:
{
  "series": [
    {
      "name": "pricing_page_viewed",
      "data": [
        { "status": "pro", "count": 1245 },
        { "status": "free", "count": 3890 }
      ]
    }
  ],
  "compare_period": null
}

Breakdown response structure from PostHog API

Compare Over Time

Use the Compare button to stack multiple time periods side-by-side—useful for spotting trends or validating that a feature launch or campaign bumped engagement.

Watch out: The Trends visualization defaults to a 7-day window. For early-stage features with low volume, you may need to widen the date range. Click the date picker at the top to adjust.

Query Event Volume Programmatically

For dashboards or scheduled reports, pull event volume data via the PostHog API.

Get Your API Credentials

Retrieve your Personal API Key from Project Settings > API Keys. You'll also need your Project ID, which you can find in the project URL or settings.

Fetch Recent Events

Use the /api/projects/{project_id}/events/ endpoint to retrieve raw events. This is useful for building custom dashboards or triggering alerts based on event volume.

javascript

const API_KEY = 'YOUR_PERSONAL_API_KEY'
const PROJECT_ID = 'YOUR_PROJECT_ID'

const response = await fetch(
  `https://us.posthog.com/api/projects/${PROJECT_ID}/events/?limit=100`,
  {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
    },
  }
)

const events = await response.json()
console.log(`Total events: ${events.count}`)

Fetch recent events via the PostHog API

Aggregate Volume with HogQL

For aggregations (like event count grouped by day), use PostHog's HogQL language—a SQL-like query interface optimized for event data. Send queries to the /api/projects/{project_id}/query/ endpoint.

javascript

const query = `
  SELECT 
    toDate(timestamp) as date,
    event,
    count() as volume
  FROM events
  WHERE event = 'pricing_page_viewed'
  GROUP BY date, event
  ORDER BY date DESC
`

const response = await fetch(
  `https://us.posthog.com/api/projects/${PROJECT_ID}/query/`,
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query }),
  }
)

const result = await response.json()
result.results.forEach(row => {
  console.log(`${row[0]}: ${row[2]} events`)
})

Query daily event volume using HogQL

Tip: HogQL is PostHog's event query language—similar to SQL but built for time-series event data. Use toDate() to bucket timestamps and count() for aggregations. Check PostHog docs for available functions.

Common Pitfalls

Setting the wrong api_host when initializing the SDK. US instances use https://us.posthog.com, while EU instances use https://eu.posthog.com. Events won't arrive if the host doesn't match your account region.
Inconsistent event naming (e.g., feature_viewed vs featureViewed). This fragments your data across multiple event types and makes trends invisible.
Misinterpreting volume spikes without context. A spike could mean increased traffic, a launch driving adoption, or a bug firing duplicate events. Always check filters and breakdowns to diagnose.
Hitting API rate limits when querying large datasets. Use pagination, date filters, and HogQL aggregations to reduce result sets and avoid throttling.

Wrapping Up

Event volume is your north star for understanding feature adoption and user engagement. With PostHog's Trends visualization and API, you can monitor volume in real-time, slice by user segments, and build dashboards that tell the story of your product. If you want to track this automatically across tools, Product Analyst can help.

How to Visualize Event Volume in PostHog

Set Up Event Capture

Initialize the PostHog SDK

Capture Events on User Actions

Verify Events Are Arriving

Visualize Event Volume with Trends

Create a New Trends Insight

Select Your Event

Add Filters and Breakdowns

Compare Over Time

Query Event Volume Programmatically

Get Your API Credentials

Fetch Recent Events

Aggregate Volume with HogQL

Common Pitfalls

Wrapping Up