Credits usage chart

Overview

The Credit Usage Chart widget provides a visual breakdown of how credits are consumed over time. It helps customers understand their spending patterns and identify which features or services drive the most usage.

Layout

• Stacked bar chart — shows daily credit consumption across different features or services.
• Color-coded legend — distinguishes usage by feature (e.g., Feature 1, Feature 2, Feature 3).
• Total spend — aggregate credits consumed over the selected timeframe.
• Date range selector — allows filtering usage data (e.g., last 7 days, last 30 days).

This widget is especially useful for monitoring consumption trends, analyzing feature-level usage, and forecasting future credit needs.

Customization

• Brand via the no-code widget designer.
• Use custom CSS when deeper styling is required.

Main component

• stigg-credit-usage-chart-container — The main wrapper for the entire CreditUsageChart component
• stigg-credit-usage-chart-card — The card container that holds the chart layout and styling
• stigg-credit-usage-chart-skeleton — The loading skeleton displayed while usage data is being fetched
• stigg-credit-usage-chart-bar — The bar element used in the usage visualization

Header component

• stigg-credit-usage-chart-header — The header container at the top of the chart
• stigg-credit-usage-chart-title — The chart title text
• stigg-credit-usage-chart-total — Displays the total spend or total usage amount
• stigg-credit-usage-chart-time-range-select — Dropdown or selector to change the chart’s time range

Tooltip component

• stigg-credit-usage-chart-tooltip — Tooltip showing detailed usage values on hover

Legend component

• stigg-credit-usage-chart-legend — Wrapper for the entire legend section
• stigg-credit-usage-chart-legend-title — Title for the legend block
• stigg-credit-usage-chart-legend-title-currency-units — Currency or unit label in the legend header
• stigg-credit-usage-chart-legend-item — Base class for each legend row
• stigg-credit-usage-chart-legend-item-{featureId} — Dynamic class applied per feature, where {featureId} is the feature’s unique identifier
• stigg-credit-usage-chart-legend-bar-container — Container holding the color bar representing each feature
• stigg-credit-usage-chart-legend-feature-name — Wrapper for the feature name in the legend
• stigg-credit-usage-chart-legend-feature-name-text — Text label of the feature name
• stigg-credit-usage-chart-legend-value — The usage amount displayed for each feature

Empty state component

• stigg-credit-usage-chart-empty-state — Displayed when no usage data is available

Error state component

• stigg-credit-usage-chart-error-state — Shown when the chart fails to load due to an error

Snippet

import React from 'react';
import { StiggProvider, CreditUsageChart, CreditUsageTimeRange } from '@stigg/react-sdk';

function App() {
  return (
    <StiggProvider
      apiKey="your-stigg-api-key"
      customerId="customer-demo-01"
    >
      <div className="credit-widgets">
        <CreditUsageChart
          currencyId="cred-type-ai-tokens" // Required: currency identifier
          timeRange={CreditUsageTimeRange.LastMonth}
          // Optional: Custom column labels and messages
          localization={{
            title: 'Usage',
            totalSpend: 'Total spend','
          }}
        />
      </div>
    </StiggProvider>
  );
}

export default App;