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

Both reports display amounts in the connected account’s default currency. Amounts in other currencies are converted into that currency.

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 you [create an Account Session](https://docs.stripe.com/api/account_sessions/create.md), enable the reporting chart component by specifying `reporting_chart` in the `components` parameter.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[reporting_chart][enabled]=true"
```

## Render the component

Set an optional height in CSS pixels, such as `320px`, to size the entire component. The component continues to fill the available width. If you omit the height, it retains its proportional sizing. The minimum height is `200px`.

`intervalStart` and `intervalEnd` accept JavaScript `Date` objects. Reporting data is grouped into UTC days, weeks, or months. A date constructed using local time can fall on a different calendar date in UTC. To select a specific UTC calendar date, construct the value using `new Date(Date.UTC(year, monthIndex, day))`.

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 front end:

#### 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");
reportingChart.setHeight("320px");
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' | 'week' | 'month'` | 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 |
| `setHeight` | `string` | Sets the height of the entire component in CSS pixels. The minimum is `200px`. | Height proportional to the available width. | 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' | 'week' | 'month'` | 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 |
| `height` | `string` | Sets the height of the entire component in CSS pixels. The minimum is `200px`. | Height proportional to the available width. | optional |