> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stigg.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

The Usage widget displays usage over time in a stacked bar chart, providing a clear view of total spend and feature-level consumption for the selected period.

The layout includes the following elements:

* **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.

<img src="https://mintcdn.com/stigg/ygEljAEwG3Wab_zZ/images/credit-usage.png?fit=max&auto=format&n=ygEljAEwG3Wab_zZ&q=85&s=98c129d0c1eab52e91ba3a51d91e3912" alt="" width="2021" height="1243" data-path="images/credit-usage.png" />

## Customization

### No-code widget designer

The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.

### Custom CSS

For more advanced customization, custom CSS can be applied using the widget designer of the Stigg app. Alternatively, custom CSS can also be applied using code.

Below you can find a list of the supported CSS classes:

#### Main component

| Class name                                                                       | Description                                                  |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-container`</span> | Main wrapper for the entire **CreditUsageChart** component   |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-card`</span>      | Card container that holds the chart layout and styling       |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-skeleton`</span>  | Loading skeleton displayed while usage data is being fetched |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-bar`</span>       | Bar element used in the usage visualization                  |

#### Header component

| Class name                                                                               | Description                                    |
| ---------------------------------------------------------------------------------------- | ---------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-header`</span>            | Header container at the top of the chart       |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-title`</span>             | Chart title text                               |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-total`</span>             | Displays the total spend or usage amount       |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-time-range-select`</span> | Selector used to change the chart’s time range |

#### Tooltip component

| Class name                                                                     | Description                                    |
| ------------------------------------------------------------------------------ | ---------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-tooltip`</span> | Tooltip showing detailed usage values on hover |

#### Legend component

| Class name                                                                                         | Description                                                     |
| -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend`</span>                      | Wrapper for the entire legend section                           |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-title`</span>                | Title for the legend block                                      |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-title-currency-units`</span> | Currency or unit label in the legend header                     |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-item`</span>                 | Base class for each legend row                                  |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-item-{featureId}`</span>     | Feature-specific legend item class (`{featureId}` = feature ID) |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-bar-container`</span>        | Container holding the color bar for each feature                |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-feature-name`</span>         | Wrapper for the feature name in the legend                      |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-feature-name-text`</span>    | Text label displaying the feature name                          |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-legend-value`</span>                | Usage amount displayed for each feature                         |

#### Empty state component

| Class name                                                                         | Description                               |
| ---------------------------------------------------------------------------------- | ----------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-empty-state`</span> | Displayed when no usage data is available |

#### Error state component

| Class name                                                                         | Description                                     |
| ---------------------------------------------------------------------------------- | ----------------------------------------------- |
| <span style={{whiteSpace: "nowrap"}}>`stigg-credit-usage-chart-error-state`</span> | Shown when the chart fails to load due to error |

## Snippet

```jsx theme={null}
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;
```

## Additional resources

<Card title="Global Theming Customization" icon="palette" href="https://docs.stigg.io/docs/react-sdk#global-theming" horizontal />

## Related SDKs

<CardGroup cols={2}>
  <Card title="" href="/api-and-sdks/integration/frontend/react" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/react.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=75e8661a7d87b8e2b3493d7fdfb33db9" alt="React" style={{ width: '32px' }} width="23" height="20" data-path="images/react.svg" />

      <span>React</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/vuejs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/qpsRT7dNo0hXTxnb/images/vue.svg?fit=max&auto=format&n=qpsRT7dNo0hXTxnb&q=85&s=c861442fd84f9822a716d778b10a8dba" alt="Vue.js" style={{ width: '32px' }} width="800" height="800" data-path="images/vue.svg" />

      <span>Vue.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/nextjs" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/FZ_ywutvYHnQbKpn/images/next.svg?fit=max&auto=format&n=FZ_ywutvYHnQbKpn&q=85&s=7fea95b3e8f678015cb8b8d58d1e7886" alt="Next.js" style={{ width: '32px' }} width="16" height="16" data-path="images/next.svg" />

      <span>Next.js</span>
    </div>
  </Card>

  <Card title="" href="/api-and-sdks/integration/frontend/html" horizontal>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <img src="https://mintcdn.com/stigg/aJeGPh9dwMpK_Kcr/images/html.svg?fit=max&auto=format&n=aJeGPh9dwMpK_Kcr&q=85&s=ae948dc9e5ca66cf75892b94859954a0" alt="Webflow, Wordpress, HTML" style={{ width: '32px' }} width="800" height="800" data-path="images/html.svg" />

      <span>Webflow, Wordpress, HTML</span>
    </div>
  </Card>
</CardGroup>