# ChartFrame

> Shared outer shell for every chart: measures its slot (width and, when filling, height), swaps in the loading or empty state, and places the legend, drawing, footer and the hidden…

Source: https://ui.jcsoftdev.com/docs/components/chart-frame

Shared outer shell for every chart: measures its slot (width and, when
filling, height), swaps in the loading or empty state, and places the
legend, drawing, footer and the hidden data table in a consistent order.
The root has no padding or margin: the drawing touches the container edges.

## Import

```ts
import { ChartFrame } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
<ChartFrame height={260} labels={labels}>
  {Columns}
</ChartFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `height` * | `number \| "fill" \| ((width: number) => number)` |  | Height of the drawing area in pixels (legend and brush are extra), or `"fill"` to take whatever height the parent leaves after the legend and footer. The parent needs a definite height (fixed, flex or grid sized). A function derives the height from the measur… |
| `aspectRatio` | `number` |  | Width / height ratio of the drawing. Wins over a pixel `height`; ignored with `"fill"`. |
| `labels` * | `ChartLabels` |  |  |
| `loading` | `boolean` |  |  |
| `empty` | `boolean` |  | Nothing to plot: renders the empty state instead of `children`. |
| `skeleton` | `"line" \| "bars" \| "ring"` | `"bars"` | Skeleton silhouette while loading. |
| `legend` | `ReactNode` |  |  |
| `legendPosition` | `"top" \| "bottom"` | `"top"` |  |
| `legendAside` | `boolean` | `false` | Polar charts: when the container is wide (`@lg/chart`) the legend moves to a column beside the drawing instead of stacking above or below it. |
| `table` | `ReactNode` |  | Accessible data table (usually `ChartDataTable`), rendered after the drawing. |
| `footer` | `ReactNode` |  | Content under the drawing, e.g. the brush. Hidden while loading or empty. |
| `className` | `string` |  |  |
| `children` * | `(width: number, height: number) => ReactNode` |  | Receives the measured width and the drawing height (a fallback on the server). |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-chartframe--default)
- [Fills Parent](/storybook/?path=/story/charts-primitives-chartframe--fills-parent)
- [Aspect Ratio](/storybook/?path=/story/charts-primitives-chartframe--aspect-ratio)
- [With Legend And Table](/storybook/?path=/story/charts-primitives-chartframe--with-legend-and-table)
- [Loading](/storybook/?path=/story/charts-primitives-chartframe--loading)
- [Loading Ring](/storybook/?path=/story/charts-primitives-chartframe--loading-ring)
- [Empty](/storybook/?path=/story/charts-primitives-chartframe--empty)

## Source

`packages/ui/src/charts/core/chart-frame.tsx`