Chart

pro

Chart wraps Recharts with product tokens for dashboard series, tooltips, legends, and custom compositions.

Get the code
Pipeline movement

Qualified opportunities and closed-won accounts by month.

+18.6%

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Chart

Examples

Line Chart

Get the code
Support throughput

Reply and resolution counts over the last six weeks.

Area Chart

Get the code
Weekly activity

API requests and dashboard sessions for the current week.

Advanced Gradient

Get the code

Bar Chart

Get the code
Open tickets by queue

Horizontal bars keep longer queue labels readable.

Pie Chart

Get the code
Acquisition mix

Channel share for the current reporting period.

Organic420
Referral260
Paid180
Partners140

Donut With Content

Get the code
Subscription health

Center content keeps the total anchored while slices show distribution.

Healthy860
Needs attention240
At risk140

Radar Chart

Get the code

Legend

Get the code
Sessions by device

The legend reads the same series colors that the chart uses.

Tooltip Formatting

Get the code
Revenue composition

Tooltip labels and values are formatted at the chart boundary.

Custom Tooltip

Get the code
Capacity planning

Custom tooltip content can read the full row payload.

Colors

Get the code
Revenue by segment

Custom fills keep the chart aligned to an external palette.

Custom And Compose

Get the code
Activation progress

Compose bars, an area mark, and a reference line in the same surface.

API

The chart exports are thin wrappers over Recharts. Recharts-owned objects such as axis props, grid props, series props, and tooltip props follow Recharts' own API; the NateUI layer supplies the product defaults and common wrapper props below.

Shared Chart Props

LineChart, AreaChart, BarChart, PieChart, and RadarChart all receive data and sizing through the shared chart props. Cartesian charts also receive x/y axis props; polar charts use their own axis props.

PropDescriptionTypeDefault
dataRecords passed to the underlying Recharts chart.ChartDatum[][]
heightPixel height applied to the responsive chart container.number300
widthPixel width applied to the chart container; omit for fluid width.number-
xAxisConfigProps forwarded to Recharts XAxis.XAxisProps{}
yAxisConfigProps forwarded to Recharts YAxis.YAxisProps{}
tooltipConfigProps forwarded to Recharts Tooltip.TooltipProps<ValueType, NameType>{}
tooltipContentConfigProps forwarded to NateUI's default tooltip content.ChartTooltipContentConfig-
chartHorizontalSpaceLeft and right margin passed to the Recharts chart.number20
chartVerticalSpaceTop and bottom margin passed to the Recharts chart.number10
childrenExtra Recharts children, or a render function receiving defaultChartConfig.ChartChildren-

Chart Components

ComponentPropDescriptionTypeDefault
LineChartlineConfigSeries config for each rendered Line.LineSeriesConfig[][]
LineChartcartesianGridConfigProps forwarded to CartesianGrid.CartesianGridProps{}
AreaChartareaConfigSeries config for each rendered Area.AreaSeriesConfig[][]
AreaChartcartesianGridConfigProps forwarded to CartesianGrid.CartesianGridProps{}
BarChartbarConfigSeries config for each rendered Bar.BarSeriesConfig[][]
BarChartlayoutDirection used by Recharts for horizontal or vertical bars.BarLayout-
BarChartstackOffsetRecharts stack offset behavior for stacked bars.StackOffset-
BarChartcartesianGridConfigProps forwarded to CartesianGrid.CartesianGridProps{}
PieChartpieConfigProps forwarded to the rendered Pie, excluding its data.PieSeriesConfig{}
PieChartcellConfigPer-slice SVG props applied to each generated sector and its chart data entry.CellConfig[][]
PieChartpieContentExtra React node rendered inside the Pie, such as Recharts labels.ReactNode-
RadarChartradarConfigSeries config for each rendered Radar.RadarSeriesConfig[][]
RadarChartangleAxisConfigProps forwarded to PolarAngleAxis.PolarAngleAxisProps{}

Helpers

ComponentPropDescriptionTypeDefault
ChartContainerchildrenThe Recharts element rendered inside ResponsiveContainer.ReactElementRequired
ChartContainerheightPixel height for the container.number300
ChartContainerwidthPixel width for the container; omit for fluid width.number'100%'
ChartContainerclassNameClasses merged onto the wrapper that owns chart reset styles.string-
ChartContainerstyleInline styles merged with the computed chart dimensions.CSSProperties-
ChartTooltipContenthideLabelHide the tooltip's top label row.booleanfalse
ChartTooltipContenthideIndicatorHide each series color indicator.booleanfalse
ChartTooltipContentnameFormatterFormat the displayed series name.ChartNameFormatter-
ChartTooltipContentvalueFormatterFormat the displayed series value.ChartValueFormatter-
ChartTooltipContentlabelClassNameClasses merged onto the tooltip label.string-
ChartTooltipContentcustomContentReplace the default tooltip body with custom rendered content.ChartCustomContent-
ChartLegendContentcustomContentReplace the generated legend items with custom rendered content.ChartLegendRenderer-
ChartLegendContentverticalAlignLegend alignment forwarded to Recharts and used for spacing.'top' | 'bottom''bottom'
ChartLegendContentclassNameClasses merged onto the custom legend wrapper.string-

Types

type ChartDatum = Record<string, string | number>;
type BarLayout = 'horizontal' | 'vertical';
type StackOffset =
  | 'sign'
  | 'expand'
  | 'none'
  | 'wiggle'
  | 'silhouette'
  | 'positive';
 
type ChartChildren =
  | ReactNode
  | ((props: typeof defaultChartConfig) => ReactNode);
 
type LineSeriesConfig = Omit<RechartsLineProps, 'ref'>;
type AreaSeriesConfig = Omit<RechartsAreaProps, 'ref'>;
type BarSeriesConfig = Omit<RechartsBarProps, 'ref'>;
type PieSeriesConfig = Omit<RechartsPieProps, 'ref' | 'data'>;
type RadarSeriesConfig = Omit<RechartsRadarProps, 'ref'>;
type CellConfig = SVGAttributes<SVGElement>;
 
type ChartNameFormatter = (
  value: number | string | undefined,
  props: TooltipPayloadEntry<ValueType, number | string>,
) => ReactNode;
 
type ChartValueFormatter = (
  value: TooltipValueType,
  props: TooltipPayloadEntry<ValueType, number | string>,
) => ReactNode;
 
type ChartCustomContent = (
  props: TooltipContentProps<ValueType, number | string>,
) => ReactNode;
 
type ChartLegendRenderer = (
  payload: readonly LegendPayload[] | undefined,
) => ReactNode;