Usage Trend Chart

Use Usage Trend Chart to plot usage over time. Each series draws its own line, so you can compare multiple features or event sources on the same chart. Part of Usage Widgets.

Preview
Code

<UsageTrendChart
  series={[
    {
      id: 'feat_api_calls',
      name: 'API Calls',
      points: [
        { timestamp: '2026-01-01T00:00:00Z', usage: 320 },
        { timestamp: '2026-01-02T00:00:00Z', usage: 410 },
      ],
    },
  ]}
  label="Usage Trend"
/>

Supports

Multiple series (one line per feature or source)
Custom time ranges (pass whatever window of points you want)
Zoom and reset
Loading skeleton state
Empty state when there is no data

Best used for

Usage dashboards
Customer portal usage tab
Account health pages

Import

import '@flexprice/ui/style.css';
import { UsageTrendChart, type UsageTrendSeries } from '@flexprice/ui';

Usage

const series: UsageTrendSeries[] = [
  {
    id: 'feat_api_calls',
    name: 'API Calls',
    points: [
      { timestamp: '2026-01-01T00:00:00Z', usage: 320 },
      { timestamp: '2026-01-02T00:00:00Z', usage: 410 },
      { timestamp: '2026-01-03T00:00:00Z', usage: 380 },
    ],
  },
];

<UsageTrendChart series={series} label="Usage Trend" />

Filtering by feature (include or exclude a list of feature IDs) is handled before the data reaches the component: filter your series array, or filter at the adapter step below. See Ways to provide data for SDK, API, backend, and static JSON options.

Map Flexprice API data

import { adaptUsageTrendSeries } from '@flexprice/ui';

const series = adaptUsageTrendSeries(analytics.items, { feature_filter_mode: 'all' });

Pass feature_filter_mode: 'include_list' or 'exclude_list' with feature_ids to filter which features appear.

Usage Widgets

Overview of all four usage components.

Metric Cards

Grid of revenue, cost, margin, and custom usage metrics.

Usage Breakdown

Grouped, sortable table of usage and cost by feature.

⌘I

Introduction

Getting Started

Connect

Event Ingestion

Product Catalogue

Scenarios

Customers

Checkout

Subscriptions

Wallet

Invoices

Webhooks

Settings

Collectors

Data Exports

RBAC

Cookbooks

AI Cost Tracking

Contributing Guide

Exportable UI

Supports

Best used for

Import

Usage

Map Flexprice API data

See also

Usage Widgets

Metric Cards

Usage Breakdown

​Supports

​Best used for

​Import

​Usage

​Map Flexprice API data

​See also

Usage Widgets

Metric Cards

Usage Breakdown

Supports

Best used for

Import

Usage

Map Flexprice API data

See also