# Reporting chart

Show charts to your connected accounts.

Reporting chart renders a UI component for connected accounts to view charts similar to those on the Stripe Dashboard, such as the Net Volume and Gross Volume charts.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

## Create an Account Session

When [creating an Account Session](https://docs.stripe.com/api/account_sessions/create.md), enable Reporting chart by specifying `reporting_chart` in the `components` parameter.

> The Reporting chart component is in private preview, so the Stripe SDKs don’t include it yet. To enable it when creating an account session, use this code snippet with the Stripe beta SDK:

#### Ruby

```ruby
Stripe.api_key = '{{sk_INSERT_YOUR_SECRET_KEY}}'
Stripe.api_version = '2023-10-16; embedded_connect_beta=v2;'
account_session = Stripe::AccountSession.create({
  account: ''{{CONNECTED_ACCOUNT_ID}}'',
  components: {
    reporting_chart: {enabled: true}
  }
})

```

After creating the account session and [initializing ConnectJS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), you can render the Reporting chart component in the frontend:

## Render the component

#### JavaScript

```js
// Include this element in your HTML
const container = document.getElementById("container");
const reportingChart = stripeConnectInstance.create("reporting-chart");
reportingChart.setReportName("net_volume");
reportingChart.setIntervalStart(new Date(Date.UTC(2023, 11, 17)));
reportingChart.setIntervalEnd(new Date(Date.UTC(2024, 08, 18)));
reportingChart.setIntervalType("day");
container.appendChild(reportingChart);
```

#### HTML + JS

| Method             | Type                                   | Description                                                                                          | Default                                                                                                                      | Required or Optional |
| ------------------ | -------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `setReportName`    | `'net_volume' |  'gross_volume'`       | The name of the report to render as a chart.                                                         |                                                                                                                              | required             |
| `setIntervalStart` | `Date`                                 | The start time to query data. Returned data might start later than this timestamp if data is sparse. | The time of the connected account’s first data point for the report specified.                                               | optional             |
| `setIntervalEnd`   | `Date`                                 | The end time to query data. Returned data might end earlier than this timestamp if data is sparse.   | The time of the connected account’s last data point for the report specified.                                                | optional             |
| `setIntervalType`  | `'day' | 'month' | 'quarter' | 'year'` | Used to determine granularity of the data.                                                           | Based on the duration between `intervalStart` and `intervalEnd`. A longer time frame defaults to showing less granular data. | optional             |

#### React

| React prop      | Type                                   | Description                                                                                          | Default                                                                                                                      | Required or Optional |
| --------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `reportName`    | `'net_volume' |  'gross_volume'`       | The name of the report to render as a chart.                                                         |                                                                                                                              | required             |
| `intervalStart` | `Date`                                 | The start time to query data. Returned data might start later than this timestamp if data is sparse. | The time of the connected account’s first data point for the report specified.                                               | optional             |
| `intervalEnd`   | `Date`                                 | The end time to query data. Returned data might end earlier than this timestamp if data is sparse.   | The time of the connected account’s last data point for the report specified.                                                | optional             |
| `intervalType`  | `'day' | 'month' | 'quarter' | 'year'` | Used to determine granularity of the data.                                                           | Based on the duration between `intervalStart` and `intervalEnd`. A longer time frame defaults to showing less granular data. | optional             |

## Request access  (Private preview)

Sign in to request access to this Connect embedded component in private preview.

If you don’t have a Stripe account, you can [register here](https://dashboard.stripe.com/register).