§Gravity UI Charts ·

Librería de gráficos React con más de 10 tipos de gráficos: área, barras, línea, pastel, dispersión, treemap y más.

§Instalación

npm install @gravity-ui/uikit @gravity-ui/charts

@gravity-ui/uikit es una dependencia peer requerida; proporciona la tematización y los estilos de los que dependen los gráficos.

§Uso

Importa los estilos de @gravity-ui/uikit una vez en tu punto de entrada, envuelve tu aplicación en ThemeProvider y renderiza un Chart dentro de un contenedor con una altura explícita:

import {ThemeProvider} from '@gravity-ui/uikit';
import {Chart} from '@gravity-ui/charts';

import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

const data = {
  series: {
    data: [
      {
        type: 'line',
        name: 'Temperature',
        data: [
          {x: 0, y: 10},
          {x: 1, y: 25},
          {x: 2, y: 18},
          {x: 3, y: 30},
        ],
      },
    ],
  },
};

export default function App() {
  return (
    <ThemeProvider theme="light">
      <div style={{height: 300}}>
        <Chart data={data} />
      </div>
    </ThemeProvider>
  );
}

Chart se adapta al tamaño de su padre, por lo que el elemento contenedor debe tener una altura definida.

§Herramientas de configuración de gráficos

El paquete proporciona declaraciones de TypeScript y JSON Schema para la validación, generación e integración de Monaco de la configuración de gráficos. Consulta la documentación de herramientas de configuración de gráficos para obtener detalles de configuración y uso.

§Documentación

• Descripción general
• Primeros pasos
• Desarrollo
• API
• Guías

§Licencia

Distribuido bajo la Licencia MIT. Consulta LICENSE para obtener más detalles.

§Para agentes de IA

Una librería declarativa de gráficos React para aplicaciones Gravity UI: renderiza gráficos de línea, área, barras, pastel, dispersión, treemap y otros a partir de una única configuración de data, tematizada para que coincida con el resto de la aplicación.

§Cuándo usar

• Gráficos empresariales estándar: line, area, bar-x/bar-y, pie, scatter, treemap, waterfall, sankey, radar, heatmap, funnel, x-range.
• Visualizaciones que deben seguir la tematización de Gravity UI (clara/oscura) y compartir tokens con una aplicación @gravity-ui/uikit.
• Renderizar un gráfico a partir de datos declarativos en lugar de dibujarlo imperativamente.

§Cuándo no usar

• Proyectos que aún usan @gravity-ui/chartkit: ese es el antiguo wrapper basado en adaptadores (YAGR/Highcharts/D3); este paquete es el renderizador independiente moderno y no es un reemplazo directo.
• Datos tabulares simples: usa @gravity-ui/table.
• Renderizado no-React o solo en servidor: Chart renderiza SVG de React y necesita el DOM.

§Errores comunes

• El componente es Chart, no ChartKit. Importa {Chart} desde @gravity-ui/charts; ChartKit pertenece al paquete separado y obsoleto @gravity-ui/chartkit.
• La prop data es data, con forma {series: {data: [...]}}. Cada entrada en series.data es una serie con su propio type y array data; no hay un array de series de nivel superior.
• Nada se renderiza sin un contenedor con tamaño. Chart llena su padre, así que dale al contenedor una altura explícita.
• Requiere configuración de uikit. Envuelve en ThemeProvider e importa @gravity-ui/uikit/styles/styles.css; @gravity-ui/uikit es una dependencia peer requerida.

§Documentos útiles

• Primeros pasos
• Tematización
• Tooltip
• Leyenda
• Contenido HTML
• Formato de valores
• Etiquetas de datos
• Tipos de ejes
• Etiquetas de ejes

§Documentación para agentes de IA

La documentación legible por agentes para la versión instalada se encuentra en node_modules/@gravity-ui/charts/dist/docs/INDEX.md.