§Gravity UI Charts ·

Biblioteca de gráficos React com mais de 10 tipos de gráficos: área, barra, linha, pizza, dispersão, treemap e muito mais.

§Instalação

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

@gravity-ui/uikit é uma dependência peer obrigatória — ela fornece a temática e os estilos dos quais os gráficos dependem.

§Uso

Importe os estilos de @gravity-ui/uikit uma vez no seu ponto de entrada, envolva seu aplicativo em ThemeProvider e renderize um Chart dentro de um contêiner com uma 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: 'Temperatura',
        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>
  );
}

O Chart se adapta ao tamanho de seu pai, portanto, o elemento de envolvimento deve ter uma altura.

§Documentação

• Visão Geral
• Começando
• Desenvolvimento
• API
• Guias

§Licença

Distribuído sob a Licença MIT. Veja LICENSE para detalhes.

§Para agentes de IA

Uma biblioteca declarativa de gráficos React para aplicativos Gravity UI — renderiza gráficos de linha, área, barra, pizza, dispersão, treemap e outros a partir de uma única configuração data, com tema para combinar com o restante do aplicativo.

§Quando usar

• Gráficos de negócios padrão: line, area, bar-x/bar-y, pie, scatter, treemap, waterfall, sankey, radar, heatmap, funnel, x-range.
• Visualizações que devem seguir a temática do Gravity UI (claro/escuro) e compartilhar tokens com um aplicativo @gravity-ui/uikit.
• Renderização de um gráfico a partir de dados declarativos em vez de desenho imperativo.

§Quando não usar

• Projetos ainda em @gravity-ui/chartkit — esse é o wrapper mais antigo baseado em adaptadores (YAGR/Highcharts/D3); este pacote é o renderizador independente moderno e não é um substituto direto.
• Dados tabulares simples — use @gravity-ui/table.
• Renderização não-React ou apenas no servidor — Chart renderiza SVG React e precisa do DOM.

§Armadilhas comuns

• O componente é Chart, não ChartKit. Importe {Chart} de @gravity-ui/charts; ChartKit pertence ao pacote legado separado @gravity-ui/chartkit.
• A prop data é data, com formato {series: {data: [...]}}. Cada entrada em series.data é uma série com seu próprio type e array data — não há um array de séries de nível superior.
• Nada é renderizado sem um contêiner dimensionado. Chart preenche seu pai, então dê ao wrapper uma altura explícita.
• Requer configuração do uikit. Envolva em ThemeProvider e importe @gravity-ui/uikit/styles/styles.css; @gravity-ui/uikit é uma dependência peer obrigatória.

§Documentos úteis

• Começando
• Temática
• Tooltip
• Legenda
• Conteúdo HTML
• Formatação de Valor
• Rótulos de Dados
• Tipos de Eixo

§Documentação para agentes de IA

A documentação legível por agente para a versão instalada está localizada em node_modules/@gravity-ui/charts/dist/docs/INDEX.md.