Chart

Wrapper de Recharts con API JSON pura. Soporta line, bar, area y pie. Responsive por defecto. Tooltip y colores personalizables. Los colores adaptan al tema automáticamente.

pnpm dlx nuvo-ui add chart

Line chart

<Chart
  type="line"
  data={monthly}
  xKey="mes"
  yKey="ventas"
  color="hsl(var(--primary))"
  height={250}
/>

Bar chart — múltiples series

<Chart
  type="bar"
  data={monthly}
  xKey="mes"
  yKey={["ventas", "costos"]}
  color={["hsl(var(--primary))", "hsl(var(--muted-foreground))"]}
  legend
/>

Area chart

<Chart type="area" data={data} xKey="mes" yKey="ventas" color="hsl(var(--primary))" />

Pie chart

<Chart
  type="pie"
  data={[
    { categoria: "Orgánico",  valor: 42 },
    { categoria: "Redes",     valor: 28 },
    { categoria: "Email",     valor: 18 },
  ]}
  xKey="categoria"
  yKey="valor"
  legend
/>

Props

Prop	Tipo	Default	Descripción
type	"line" \| "bar" \| "area" \| "pie"	—	Tipo de gráfica
data	Record<string, unknown>[]	—	Array de puntos de datos
xKey	string	"name"	Campo para el eje X
yKey	string \| string[]	"value"	Campo(s) para el eje Y. Array = múltiples series
color	string \| string[]	paleta	Color(es) de las series. Acepta hex, hsl(), hsl(var(--token)) o cualquier valor CSS válido
height	number	300	Altura en píxeles
legend	boolean	false	Muestra la leyenda
grid	boolean	true	Muestra la cuadrícula
tooltipFormatter	function	—	Formateador personalizado para el tooltip