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/cli@latest add Chart

Examples

Line Chart

Get the code

Area Chart

Get the code

Advanced Gradient

Get the code

Bar Chart

Get the code

Pie Chart

Get the code

Donut With Content

Get the code

Radar Chart

Get the code

Legend

Get the code

Tooltip Formatting

Get the code

Custom Tooltip

Get the code

Colors

Get the code

Custom And Compose

Get the code

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;