P&L Breakdown Charts

Itemized breakdown of revenue and expenses.

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

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

ProfitAndLoss.DetailedCharts Properties

scope · string

Options are revenue or expenses.

showDatePicker · boolean

If true, shows a dedicated date picker for this component. If not, inherits the current P&L context date range.

chartConfig · ProfitAndLossChartConfig

Optional styling overrides for the chart. Takes precedence over chartColorsList where both are supplied.

Show ProfitAndLossChartConfig properties

colors · object

Show colors properties

revenue · 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.

expenses · string[]

Same as revenue, but only applies when scope is expenses.

uncategorized · string

Color for the uncategorized slice and its legend swatch. Omit to keep the default dot-pattern donut fill and neutral swatch color.

donutChart · object

Show donutChart properties

innerRadius · string | number · default: "'91%'"

Inner radius of the donut chart.

outerRadius · string | number · default: "'100%'"

Outer radius of the donut chart.

chartColorsList · 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.