Referencia
Gráficos y tablas
Elige una biblioteca de gráficos y otra de tablas para tus borradores, y pide el gráfico o la tabla que quieras con menciones @chart y @table.
Elige una biblioteca de gráficos y una de tablas para acompañar a tu sistema de diseño, y todos los gráficos y tablas de datos de tus borradores se construirán con ellas. Selecciona Gráficos y tablas junto al selector Sistema de diseño y elige una de cada, o Paquete npm personalizado… para cualquier otra.
Elige tus bibliotecas
| Biblioteca | Para | Paquetes |
|---|---|---|
| Recharts | Gráficos | recharts@3 |
| Apache ECharts | Gráficos | echarts@6, echarts-for-react@3 |
| Chart.js | Gráficos | chart.js@4, react-chartjs-2@5 |
| Victory | Gráficos | victory@37 |
| MUI X Charts | Gráficos | @mui/x-charts@9 |
| TanStack Table | Tablas | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | Tablas | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | Tablas | @mui/x-data-grid@9 |
| React Data Grid | Tablas | react-data-grid@7 (beta) |
La elección se guarda con cada prototipo y lo acompaña en las exportaciones. Cambiarla no inicia una sesión nueva, así que puedes añadir una biblioteca de gráficos a mitad de camino. Un paquete personalizado se comprueba en npm antes de construir, igual que un sistema de diseño personalizado.
Menciona un gráfico o una tabla
Luego di lo que quieres con una mención. Escribe @ y chart/ o table/ para verlas todas:
- Gráficos:
@chart/bar,@chart/stacked-bar,@chart/horizontal-bar,@chart/line,@chart/area,@chart/stacked-area,@chart/pie,@chart/donut,@chart/scatter,@chart/radar,@chart/heatmap,@chart/treemap,@chart/funnel,@chart/gauge,@chart/sparkliney@chart/combo(barras y una línea). - Tablas:
@table/sortable,@table/filterable,@table/paginated,@table/selectable,@table/editable,@table/grouped,@table/expandable,@table/pinned(encabezado y primera columna fijos),@table/virtualized(miles de filas) y@table/resizable. Menciona varias para una misma tabla:@table/sortable @table/paginated.
Cada mención le indica al modelo qué partes de tu biblioteca construyen ese gráfico o esa tabla. Cuando la biblioteca no lo tiene, como un mapa de calor en Recharts o la agrupación de filas en la edición gratuita de AG Grid, el modelo lo construye de otra forma con el mismo estilo.
Que encaje con tu diseño
Para que encaje con tu diseño, menciona un tema de color en la misma petición: los gráficos y las tablas toman sus colores y su tipografía en modo claro y oscuro, y las tablas también su radio de esquina y su espaciado. Sin una biblioteca elegida, los gráficos se dibujan a mano como SVG y las tablas usan las de tu sistema de diseño.