Data visualization component para bar, line, donut y pie. Diseñado para exponer métricas con buen contraste, tokens de tema y API simple.
Revenue
H1 performance
Bar · Line · Donut · Pie
Importa los estilos base y el componente Charts.
1import 'nave-ui-library/styles.css'2import { Charts } from 'nave-ui-library/react'Contrato único de datos para todos los tipos de gráfico.
El componente consume un contrato único:{ label, value, color? }
label: nombre de categoría (eje X, leyenda y tooltip).value: valor numérico que grafica la serie.color: opcional, sobrescribe la paleta del tema para ese item.1const data = [2 { label: 'Critical', value: 22, color: '#DC2626' },3 { label: 'Warning', value: 31, color: '#F59E0B' },4 { label: 'Healthy', value: 47, color: '#16A34A' },5];Charts soporta cuatro variantes visuales: bar, line, donut y pie.
Bar
Line
Donut
Pie
Comparación de categorías discretas con barras verticales.
Revenue by month
H1 performance
Visualización de tendencias temporales.
Weekly volume
Last 6 weeks
Composición de un total con variantes donut y pie.
Payment mix
Current month
Health status
Custom colors by datum
Apaga grilla, ejes o baseline para contextos compactos.
Compact trend
Sobreescribe tokens solo para una instancia via la prop tokens.
1<Charts2 type="bar"3 data={monthlyRevenueData}4 tokens={{5 components: {6 charts: {7 palette: ['#E6D5BE', '#CFA16D', '#F67E07', '#C26E04', '#8E4E00'],8 title: { fontSize: '18px', fontWeight: 550 },9 legend: { fontSize: '12px', gap: '12px' },10 bar: { radius: 12, maxBarSize: 44 },11 },12 },13 }}14/>Snippets rápidos para escenarios comunes.
1<>2 <Charts3 type="line"4 data={trendData}5 xDataKey="label"6 yDataKey="value"7 showLineArea={false}8 showYAxis9 valueFormatter={(v) => v.toLocaleString()}10 />11 12 <Charts13 type="donut"14 data={channelShareData}15 yDataKey="value"16 nameKey="label"17 donutCenterValue="55%"18 donutCenterLabel="Femenino"19 />20 21 <Charts data={[]} emptyStateLabel="Sin información disponible" />22 </>Todas las props disponibles para el componente Charts.
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'bar' | 'line' | 'donut' | 'pie' | 'bar' | Define el tipo de visualización. |
datareq | Array<{ label; value; color? }> | — | Contrato base de datos para todos los tipos. |
xDataKey | string | 'label' | Clave de categoría para eje X en bar/line. |
yDataKey | string | 'value' | Clave numérica para serie principal. |
nameKey | string | 'label' | Clave de etiqueta para pie/donut. |
title | ReactNode | — | Texto de contexto principal. |
subtitle | ReactNode | — | Texto de contexto secundario. |
showLegend | boolean | true | Muestra u oculta la leyenda. |
showGrid | boolean | true | Muestra grilla en bar y line. |
showXAxis | boolean | true | Muestra eje X. |
showYAxis | boolean | false | Muestra eje Y. |
showBaseline | boolean | true | Muestra la línea base. |
showTooltip | boolean | true | Habilita tooltip de valor + label. |
height | number | — | Alto del gráfico en px. |
showLineArea | boolean | true | En line chart, muestra/oculta área degradada. |
legendTitle | string | — | Título para la leyenda. |
emptyStateLabel | ReactNode | 'No data' | Mensaje de estado vacío cuando no hay datos. |
valueFormatter | (value: number) => string | — | Formatea valores en tooltip y lectura. |
donutCenterValue | ReactNode | — | Valor central del donut. |
donutCenterLabel | ReactNode | — | Etiqueta central del donut. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
1{2 "name": "Charts",3 "description": "Componente de gráficos con variantes bar, line, pie y donut basado en recharts.",4 "component": "Charts",5 "files": [6 "components/base/data-display/charts/Charts.tsx"7 ],8 "dependencies": [9 "react",10 "recharts"11 ],12 "props": {13 "type": {14 "type": "'bar' | 'line' | 'donut' | 'pie'",15 "default": "bar",16 "description": "Tipo de gráfico a renderizar."17 },18 "data": {19 "type": "{ label: string; value: number; color?: string }[]",20 "required": true,21 "description": "Dataset del gráfico."22 },23 "showLegend": {24 "type": "boolean",25 "default": true,26 "description": "Muestra/oculta la leyenda."27 },28 "showGrid": {29 "type": "boolean",30 "default": true,31 "description": "Muestra/oculta la grilla."32 },33 "showBaseline": {34 "type": "boolean",35 "default": true,36 "description": "Muestra/oculta la linea base del grafico."37 },38 "showXAxis": {39 "type": "boolean",40 "default": true,41 "description": "Muestra/oculta el eje X."42 },43 "showYAxis": {44 "type": "boolean",45 "default": false,46 "description": "Muestra/oculta el eje Y."47 },48 "showTooltip": {49 "type": "boolean",50 "default": true,51 "description": "Muestra/oculta el tooltip."52 },53 "height": {54 "type": "number",55 "default": 260,56 "description": "Altura del área del gráfico en px."57 },58 "donutCenterValue": {59 "type": "React.ReactNode",60 "description": "Valor central para variante donut."61 },62 "donutCenterLabel": {63 "type": "React.ReactNode",64 "description": "Etiqueta central para variante donut."65 },66 "xDataKey": {67 "type": "string",68 "default": "label",69 "description": "Clave del eje/categoría para bar y line charts."70 },71 "yDataKey": {72 "type": "string",73 "default": "value",74 "description": "Clave numérica usada para bar, line, pie y donut."75 },76 "nameKey": {77 "type": "string",78 "default": "label",79 "description": "Clave de nombre para leyenda/tooltip en pie y donut."80 },81 "showLineArea": {82 "type": "boolean",83 "default": true,84 "description": "Activa/desactiva el relleno de área en el gráfico line."85 },86 "emptyStateLabel": {87 "type": "React.ReactNode",88 "default": "No data",89 "description": "Mensaje mostrado cuando no hay datos."90 },91 "valueFormatter": {92 "type": "(value: number) => string",93 "description": "Formateador de valores mostrado en tooltip."94 },95 "tokens": {96 "type": "Partial<ThemeTokensBase>",97 "description": "Override local de tokens para una instancia específica."98 }99 },100 "states": {101 "default": {},102 "empty": {},103 "with-tooltip": {},104 "without-legend": {}105 }106}