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

<img src="https://mintcdn.com/layerfinancialtechnologiesinc/dOKQpcu8ul1Jxqlc/images/components/pnl-breakdown-charts.png?fit=max&auto=format&n=dOKQpcu8ul1Jxqlc&q=85&s=31bac7008bf2001c901cdcfaf70884b4" alt="" width="1518" height="1350" data-path="images/components/pnl-breakdown-charts.png" />

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="chartConfig" type="ProfitAndLossChartConfig">
  Optional styling overrides for the chart. Takes precedence over `chartColorsList` where both are supplied.

  <Expandable title="ProfitAndLossChartConfig properties">
    <ParamField body="colors" type="object">
      <Expandable title="colors properties">
        <ParamField body="revenue" type="string[]">
          Ordered palette for the revenue chart. Categories are assigned colors in alphabetical order by name; if the list is shorter than the number of categories, colors repeat with reduced opacity. Only applies when `scope` is `revenue`.
        </ParamField>

        <ParamField body="expenses" type="string[]">
          Same as `revenue`, but only applies when `scope` is `expenses`.
        </ParamField>

        <ParamField body="uncategorized" type="string">
          Color for the uncategorized slice and its legend swatch. Omit to keep the default dot-pattern donut fill and neutral swatch color.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="donutChart" type="object">
      <Expandable title="donutChart properties">
        <ParamField body="innerRadius" type="string | number" default="'91%'">
          Inner radius of the donut chart.
        </ParamField>

        <ParamField body="outerRadius" type="string | number" default="'100%'">
          Outer radius of the donut chart.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="chartColorsList" type="string[]">
  Legacy way to override the colors of the pie chart. Categories are assigned colors in alphabetical order by name.
  If the list of colors is shorter than the number of categories, the colors will repeat with shifted opacity. Prefer `chartConfig.colors`, which also lets you set a scope-specific palette and an uncategorized color.
</ParamField>