Usage Trend Chart - Flexprice

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"
/>

What UsageTrendChart 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

Where to use UsageTrendChart

Usage dashboards
Customer portal usage tab
Account health pages

Importing UsageTrendChart

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

Rendering UsageTrendChart

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.

Mapping API data into UsageTrendChart

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.

​What UsageTrendChart supports

​Where to use UsageTrendChart

​Importing UsageTrendChart

​Rendering UsageTrendChart

​Mapping API data into UsageTrendChart

​Related usage widgets