Gravity UI Charts ·

React charting library with 10+ chart types: area, bar, line, pie, scatter, treemap, and more.

Install

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

@gravity-ui/uikit is a required peer dependency — it provides the theming and styles the charts rely on.

Usage

Import the @gravity-ui/uikit styles once in your entry point, wrap your app in ThemeProvider, and render a Chart inside a container with an explicit height:

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 adapts to its parent's size, so the wrapping element must have a height.

Chart config tooling

The package provides TypeScript declarations and JSON Schema for chart config validation, generation, and Monaco integration. See the chart config tooling documentation for setup and usage details.

Documentation

• Overview
• Get started
• Development
• API
• Guides

License

Distributed under the MIT License. See LICENSE for details.

For AI agents

A declarative React charting library for Gravity UI apps — render line, area, bar, pie, scatter, treemap, and other charts from a single data config, themed to match the rest of the app.

When to use

• Standard business charts: line, area, bar-x/bar-y, pie, scatter, treemap, waterfall, sankey, radar, heatmap, funnel, x-range.
• Visualizations that must follow Gravity UI theming (light/dark) and share tokens with a @gravity-ui/uikit app.
• Rendering a chart from declarative data rather than drawing imperatively.

When not to use

• Projects still on @gravity-ui/chartkit — that is the older adapter-based wrapper (YAGR/Highcharts/D3); this package is the modern standalone renderer and is not a drop-in replacement.
• Plain tabular data — use @gravity-ui/table.
• Non-React or server-only rendering — Chart renders React SVG and needs the DOM.

Common pitfalls

• The component is Chart, not ChartKit. Import {Chart} from @gravity-ui/charts; ChartKit belongs to the separate legacy @gravity-ui/chartkit package.
• The data prop is data, shaped {series: {data: [...]}}. Each entry in series.data is one series with its own type and data array — there is no top-level array of series.
• Nothing renders without a sized container. Chart fills its parent, so give the wrapper an explicit height.
• Requires uikit setup. Wrap in ThemeProvider and import @gravity-ui/uikit/styles/styles.css; @gravity-ui/uikit is a required peer dependency.

Useful docs

• Get started
• Theming
• Tooltip
• Legend
• HTML Content
• Value Formatting
• Data Labels
• Axis Types
• Axis Labels

Documentation for AI agents

Agent-readable documentation for the installed version is located in node_modules/@gravity-ui/charts/dist/docs/INDEX.md.