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

# Chart

> Chart of revenue, expenses, and profit for the last 12 months.

<img src="https://mintcdn.com/layerfinancialtechnologiesinc/dOKQpcu8ul1Jxqlc/images/components/pnl-chart.png?fit=max&auto=format&n=dOKQpcu8ul1Jxqlc&q=85&s=836a8c1c5e1a587e2de7f5754479b707" alt="Profit and Loss chart" width="2560" height="732" data-path="images/components/pnl-chart.png" />

```tsx theme={null}
import { ProfitAndLoss } from "@layerfi/components";
…
<ProfitAndLoss>
  <ProfitAndLoss.Chart />
</ProfitAndLoss>
```

### Properties

<ParamField body="chartConfig" type="ProfitAndLossChartConfig">
  Optional styling overrides for the chart.

  <Expandable title="ProfitAndLossChartConfig properties">
    <ParamField body="barChart" type="object">
      <Expandable title="barChart properties">
        <ParamField body="barWidth" type="number" default="20">
          Width of the bars, in pixels.
        </ParamField>

        <ParamField body="compactBarWidth" type="number">
          Width of the bars when the chart renders in its compact layout (below 620px wide). Defaults to half of `barWidth`.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

### CSS variables

Colors and line thickness are set with [CSS variables](/embedded-components/styling#css-variables) rather than `chartConfig`, since they apply to a single fixed element rather than a per-category palette.

```css theme={null}
body .Layer__component {
  /* Revenue bars. Also colors the diagonal stripe pattern on the uncategorized portion of the bar. */
  --bar-color-income: blue;

  /* Expense bars. Also colors the diagonal stripe pattern on the uncategorized portion of the bar. */
  --bar-color-expenses: red;

  /* Net profit line color. Defaults to var(--color-base-1000). */
  --pnl-chart-line-color: green;

  /* Net profit line thickness, in pixels. Defaults to 1. */
  --pnl-chart-line-stroke-width: 2;
}
```