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

# P&L Breakdown Charts

> Itemized breakdown of revenue and expenses.

![](https://github.com/user-attachments/assets/910d1d59-4274-453c-b125-c98a379e3d0e)

Ths P\&L Detail chart allows exploring the drivers of costs and revenue within a specific month.

```tsx theme={null}
import { ProfitAndLoss } from "@layerfi/components";
…
<ProfitAndLoss>
  <ProfitAndLoss.DetailedCharts
    scope='expenses'
    hideClose
    chartColorsList={['#FF0000', '#FFA500', '#FFFF00', '#008000']}
  />
</ProfitAndLoss>
```

### `ProfitAndLoss.DetailedCharts` Properties

<ParamField body="scope" type="string">
  Options are `revenue` or `expenses`.
</ParamField>

<ParamField body="showDatePicker" type="boolean">
  If true, shows a dedicated date picker for this component. If not, inherits the current P\&L context date range.
</ParamField>

<ParamField body="chartColorsList" type="string[]">
  Overrides the colors of the pie chart. Slices will iterate through the specified color options in descending order by total value.
  If the list of colors is shorter than the number of slices, the colors will repeat with shifted opacity.
</ParamField>