Skip to main content

​
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;