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 data table in a consistent order. The root has no padding or margin: the drawing touches the container edges.

Import

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

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

Usage

<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
• Fills Parent
• Aspect Ratio
• With Legend And Table
• Loading
• Loading Ring
• Empty

Source

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