or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-visualizations.mdcomposite-charts.mdgauge-progress.mdgraph-components.mdindex.mdspecialized-charts.mdstatistical-charts.mdtiny-charts.md
tile.json

index.mddocs/

Ant Design Charts

Ant Design Charts is a comprehensive React charting library built on top of @antv/g2plot that provides data visualization components including statistical plots, advanced visualizations, and specialized charts with TypeScript support and responsive design. It offers over 30 different chart types with built-in TypeScript support, responsive design, and seamless integration with the Ant Design ecosystem.

Package Information

  • Package Name: @ant-design/charts
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ant-design/charts

Core Imports

import { Line, Area, Column, Bar, Pie } from "@ant-design/charts";

For CommonJS:

const { Line, Area, Column, Bar, Pie } = require("@ant-design/charts");

Import all components:

import * as Charts from "@ant-design/charts";
// Use as Charts.Line, Charts.Area, etc.

Basic Usage

import React from "react";
import { Line, Column, Pie } from "@ant-design/charts";

// Line chart example
const LineExample = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
  ];

  const config = {
    data,
    xField: 'year',
    yField: 'value',
    smooth: true,
  };

  return <Line {...config} />;
};

// Column chart example
const ColumnExample = () => {
  const data = [
    { type: 'A', value: 38 },
    { type: 'B', value: 52 },
    { type: 'C', value: 61 },
    { type: 'D', value: 45 },
  ];

  const config = {
    data,
    xField: 'type',
    yField: 'value',
  };

  return <Column {...config} />;
};

Architecture

Ant Design Charts is built around several key components:

  • Chart Components: React wrapper components for G2Plot charts with consistent props and lifecycle management
  • Configuration System: TypeScript interfaces extending G2Plot configurations with React-specific properties
  • Container System: Common container properties for styling, loading states, and event handling
  • Graph Components: Advanced graph visualizations built on @antv/g6 for network and tree structures
  • Utility Functions: Re-exported utilities from G2Plot for advanced customization

Capabilities

Statistical Plot Components

Core statistical charts for data analysis including line charts, bar charts, area charts, scatter plots, and histograms. These charts are ideal for time series data, comparisons, distributions, and correlations.

// Basic chart components
function Area(props: AreaConfig): JSX.Element;
function Bar(props: BarConfig): JSX.Element;
function Column(props: ColumnConfig): JSX.Element; 
function Line(props: LineConfig): JSX.Element;
function Pie(props: PieConfig): JSX.Element;
function Scatter(props: ScatterConfig): JSX.Element;
function Histogram(props: HistogramConfig): JSX.Element;
function Box(props: BoxConfig): JSX.Element;

// Chart configuration interfaces
interface AreaConfig extends AreaOptions, ContainerConfig<AreaOptions> {
  chartRef?: ChartRefConfig;
}

interface ContainerConfig<O extends AllBaseConfig = Options, P extends Plot<O> = Plot<O>> {
  style?: React.CSSProperties;
  className?: string;
  loading?: boolean;
  loadingTemplate?: React.ReactElement;
  errorTemplate?: (e: Error) => React.ReactNode;
  onReady?: (chart: P) => void;
  onEvent?: (chart: P, event: PlotEvent) => void;
}

Statistical Charts

Advanced Visualization Components

Specialized charts for complex data visualization including heatmaps, treemaps, chord diagrams, sankey diagrams, and word clouds. Perfect for hierarchical data, relationships, flows, and multi-dimensional analysis.

function Heatmap(props: HeatmapConfig): JSX.Element;
function Treemap(props: TreemapConfig): JSX.Element;
function Sunburst(props: SunburstConfig): JSX.Element;
function Chord(props: ChordConfig): JSX.Element;
function Sankey(props: SankeyConfig): JSX.Element;
function WordCloud(props: WordCloudConfig): JSX.Element;
function Waterfall(props: WaterfallConfig): JSX.Element;
function Funnel(props: FunnelConfig): JSX.Element;

// Advanced visualization configuration interfaces
interface HeatmapConfig extends HeatmapOptions, ContainerConfig<HeatmapOptions> {
  chartRef?: ChartRefConfig;
}

interface TreemapConfig extends TreemapOptions, ContainerConfig<TreemapOptions> {
  chartRef?: ChartRefConfig;
}

interface SunburstConfig extends SunburstOptions, ContainerConfig<SunburstOptions> {
  chartRef?: ChartRefConfig;
}

interface ChordConfig extends ChordOptions, ContainerConfig<ChordOptions> {
  chartRef?: ChartRefConfig;
}

interface SankeyConfig extends SankeyOptions, ContainerConfig<SankeyOptions> {
  chartRef?: ChartRefConfig;
}

interface WordCloudConfig extends WordCloudOptions, ContainerConfig<WordCloudOptions> {
  chartRef?: ChartRefConfig;
}

interface WaterfallConfig extends WaterfallOptions, ContainerConfig<WaterfallOptions> {
  chartRef?: ChartRefConfig;
}

interface FunnelConfig extends FunnelOptions, ContainerConfig<FunnelOptions> {
  chartRef?: ChartRefConfig;
}

Advanced Visualizations

Gauge and Progress Components

Specialized components for displaying metrics, KPIs, and progress indicators including gauges, liquid fills, progress bars, and bullet charts.

function Gauge(props: GaugeConfig): JSX.Element;
function Liquid(props: LiquidConfig): JSX.Element;
function Progress(props: ProgressConfig): JSX.Element;
function RingProgress(props: RingProgressConfig): JSX.Element;
function Bullet(props: BulletConfig): JSX.Element;

// Gauge and progress configuration interfaces
interface GaugeConfig extends GaugeOptions, ContainerConfig<GaugeOptions> {
  chartRef?: ChartRefConfig;
}

interface LiquidConfig extends LiquidOptions, ContainerConfig<LiquidOptions> {
  chartRef?: ChartRefConfig;
}

interface ProgressConfig extends ProgressOptions, ContainerConfig<ProgressOptions> {
  chartRef?: ChartRefConfig;
}

interface RingProgressConfig extends RingProgressOptions, ContainerConfig<RingProgressOptions> {
  chartRef?: ChartRefConfig;
}

interface BulletConfig extends BulletOptions, ContainerConfig<BulletOptions> {
  chartRef?: ChartRefConfig;
}

Gauge and Progress Charts

Financial and Specialized Charts

Charts designed for specific use cases including financial data visualization, radial charts, and bidirectional comparisons.

function Stock(props: StockConfig): JSX.Element;
function Rose(props: RoseConfig): JSX.Element;
function RadialBar(props: RadialBarConfig): JSX.Element;
function BidirectionalBar(props: BidirectionalBarConfig): JSX.Element;
function Radar(props: RadarConfig): JSX.Element;
function Violin(props: ViolinConfig): JSX.Element;

// Specialized chart configuration interfaces
interface StockConfig extends StockOptions, ContainerConfig<StockOptions> {
  chartRef?: ChartRefConfig;
}

interface RoseConfig extends RoseOptions, ContainerConfig<RoseOptions> {
  chartRef?: ChartRefConfig;
}

interface RadialBarConfig extends RadialBarOptions, ContainerConfig<RadialBarOptions> {
  chartRef?: ChartRefConfig;
}

interface BidirectionalBarConfig extends BidirectionalBarOptions, ContainerConfig<BidirectionalBarOptions> {
  chartRef?: ChartRefConfig;
}

interface RadarConfig extends RadarOptions, ContainerConfig<RadarOptions> {
  chartRef?: ChartRefConfig;
}

interface ViolinConfig extends ViolinOptions, ContainerConfig<ViolinOptions> {
  chartRef?: ChartRefConfig;
}

Specialized Charts

Tiny Chart Components

Compact chart components for sparklines and embedded visualizations where space is limited.

function TinyArea(props: TinyAreaConfig): JSX.Element;
function TinyColumn(props: TinyColumnConfig): JSX.Element;
function TinyLine(props: TinyLineConfig): JSX.Element;

// Tiny chart configuration interfaces
interface TinyAreaConfig extends TinyPlotOptions, ContainerConfig<TinyPlotOptions> {
  chartRef?: ChartRefConfig;
}

interface TinyColumnConfig extends TinyPlotOptions, ContainerConfig<TinyPlotOptions> {
  chartRef?: ChartRefConfig;
}

interface TinyLineConfig extends TinyPlotOptions, ContainerConfig<TinyPlotOptions> {
  chartRef?: ChartRefConfig;
}

interface TinyPlotOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
  data: number[];
}

Tiny Charts

Composite Charts

Charts that combine multiple visualizations or provide advanced composition capabilities.

function DualAxes(props: DualAxesConfig): JSX.Element;
function Mix(props: MixConfig): JSX.Element;
function MultiView(props: MixConfig): JSX.Element; // Alias for Mix
function Facet(props: FacetConfig): JSX.Element;

// Composite chart configuration interfaces
interface DualAxesConfig extends DualAxesOptions, ContainerConfig<DualAxesOptions> {
  chartRef?: ChartRefConfig;
}

interface MixConfig extends MixOptions, ContainerConfig<MixOptions> {
  chartRef?: ChartRefConfig;
}

interface FacetConfig extends FacetOptions, ContainerConfig<FacetOptions> {
  chartRef?: ChartRefConfig;
}

Composite Charts

Graph Components

Advanced graph visualizations for network data, organizational charts, and flow analysis built on @antv/g6.

function FlowAnalysisGraph(props: FlowAnalysisGraphConfig): JSX.Element;
function RadialTreeGraph(props: RadialTreeGraphConfig): JSX.Element;
function DecompositionTreeGraph(props: DecompositionTreeGraphConfig): JSX.Element;
function OrganizationGraph(props: OrganizationGraphConfig): JSX.Element; 
function FundFlowGraph(props: FundFlowGraphConfig): JSX.Element;

// Deprecated graph components (still available for backward compatibility)
/** @deprecated Use OrganizationGraph instead */
function OrganizationTreeGraph(props: OrganizationTreeGraphConfig): JSX.Element;
/** @deprecated Use FlowAnalysisGraph instead */
function DagreGraph(props: DagreGraphConfig): JSX.Element;
/** @deprecated Use DecompositionTreeGraph instead */
function IndentedTree(props: IndentedTreeConfig): JSX.Element;
/** @deprecated Use FundFlowGraph instead */
function DagreFundFlowGraph(props: DagreFundFlowGraphConfig): JSX.Element;
/** @deprecated Use DecompositionTreeGraph instead */
function IndentedTreeGraph(props: IndentedTreeGraphConfig): JSX.Element;
/** @deprecated Use OrganizationGraph instead */
function OrganizationalGraph(props: OrganizationalGraphConfig): JSX.Element;
/** @deprecated Use RadialTreeGraph instead */
function RadialGraph(props: RadialGraphConfig): JSX.Element;

// Graph configuration interfaces
interface FlowAnalysisGraphConfig extends Omit<CommonConfig, 'data'> {
  data: FlowGraphDatum;
}

interface RadialTreeGraphConfig extends Omit<CommonConfig, 'data'> {
  data: TreeGraphData;
}

interface DecompositionTreeGraphConfig extends Omit<CommonConfig, 'data'> {
  data: TreeGraphData;
}

interface OrganizationGraphConfig extends Omit<CommonConfig, 'data'> {
  data: OrganizationGraphData;
}

interface FundFlowGraphConfig extends Omit<CommonConfig, 'data'> {
  data: FlowGraphDatum;
}

// Deprecated graph configuration interfaces
interface OrganizationTreeGraphConfig extends Omit<CommonConfig, 'data'> {
  data: OrganizationGraphData;
}

interface DagreGraphConfig extends Omit<CommonConfig, 'data'> {
  data: FlowGraphDatum;
}

interface IndentedTreeConfig extends Omit<CommonConfig, 'data'> {
  data: TreeGraphData;
}

interface DagreFundFlowGraphConfig extends Omit<CommonConfig, 'data'> {
  data: FlowGraphDatum;
}

interface IndentedTreeGraphConfig extends Omit<CommonConfig, 'data'> {
  data: TreeGraphData;
}

interface OrganizationalGraphConfig extends Omit<CommonConfig, 'data'> {
  data: OrganizationGraphData;
}

interface RadialGraphConfig extends Omit<CommonConfig, 'data'> {
  data: TreeGraphData;
}

// Base graph configuration interface
interface CommonConfig extends GraphContainerConfig {
  autoFit?: boolean;
  fitCenter?: boolean;
  width?: number;
  height?: number;
  data: Datum;
  layout?: any;
  edgeCfg?: EdgeCfg;
  nodeCfg?: NodeCfg;
  markerCfg: IMarkerCfg;
  minimapCfg?: MiniMapConfig;
  behaviors?: string[];
  animate?: boolean;
  adjustLayout?: boolean;
  onReady?: (graph: IGraph) => void;
}

// Graph data type definitions
type OrganizationGraphData = NodeData<{
  name: string;
  title?: string;
  icon?: string;
}[]>;

type TreeGraphData = NodeData<{
  title?: string;
  items?: CardItems[];
}[]>;

interface FlowGraphDatum {
  nodes: FlowGraphNodeData[];
  edges: FlowGraphEdgeData[];
}

type FlowGraphNodeData = NodeData<{
  title?: string;
  items?: CardItems[];
}[]>;

type FlowGraphEdgeData = EdgeData<string>;

interface CardItems {
  text: string | number;
  value?: string | number;
  icon?: string;
}

interface NodeData<T> {
  id: string;
  value: T;
  children?: NodeData<T>[];
}

interface EdgeData<T> {
  source: string;
  target: string;
  value?: T;
}

type Datum = Record<string, any>;

Graph Components

Types

Core Configuration Types

type ChartRefConfig = 
  | ((chart: Plot<AllBaseConfig>) => void)
  | React.MutableRefObject<Plot<AllBaseConfig> | undefined>;

type PlotEvent = G2.Event;

type AllBaseConfig = 
  | Options
  | DualAxesOptions  
  | GaugeOptions
  | TinyPlotOptions
  | BulletOptions
  | MixOptions
  | TreemapOptions;

// Re-exported from @antv/g2plot for type reference
interface Plot<T> {
  render(): void;
  update(config: Partial<T>): void;
  destroy(): void;
  downloadImage(name?: string, type?: string, encoderOptions?: number): void;
  toDataURL(type?: string, encoderOptions?: number): string;
  // Additional methods available on G2Plot instances
}

// G2Plot Options interfaces (re-exported from @antv/g2plot)
type Options = import('@antv/g2plot').Options;
type AreaOptions = import('@antv/g2plot').AreaOptions;
type BarOptions = import('@antv/g2plot').BarOptions;
type ColumnOptions = import('@antv/g2plot').ColumnOptions;
type LineOptions = import('@antv/g2plot').LineOptions;
type PieOptions = import('@antv/g2plot').PieOptions;
type ScatterOptions = import('@antv/g2plot').ScatterOptions;
type HistogramOptions = import('@antv/g2plot').HistogramOptions;
type BoxOptions = import('@antv/g2plot').BoxOptions;
type HeatmapOptions = import('@antv/g2plot').HeatmapOptions;
type TreemapOptions = import('@antv/g2plot').TreemapOptions;
type SunburstOptions = import('@antv/g2plot').SunburstOptions;
type ChordOptions = import('@antv/g2plot').ChordOptions;
type SankeyOptions = import('@antv/g2plot').SankeyOptions;
type WordCloudOptions = import('@antv/g2plot').WordCloudOptions;
type WaterfallOptions = import('@antv/g2plot').WaterfallOptions;
type FunnelOptions = import('@antv/g2plot').FunnelOptions;
type GaugeOptions = import('@antv/g2plot').GaugeOptions;
type LiquidOptions = import('@antv/g2plot').LiquidOptions;
type ProgressOptions = import('@antv/g2plot').ProgressOptions;
type RingProgressOptions = import('@antv/g2plot').RingProgressOptions;
type BulletOptions = import('@antv/g2plot').BulletOptions;
type StockOptions = import('@antv/g2plot').StockOptions;
type RoseOptions = import('@antv/g2plot').RoseOptions;
type RadialBarOptions = import('@antv/g2plot').RadialBarOptions;
type BidirectionalBarOptions = import('@antv/g2plot').BidirectionalBarOptions;
type RadarOptions = import('@antv/g2plot').RadarOptions;
type ViolinOptions = import('@antv/g2plot').ViolinOptions;
type DualAxesOptions = import('@antv/g2plot').DualAxesOptions;
type MixOptions = import('@antv/g2plot').MixOptions;
type FacetOptions = import('@antv/g2plot').FacetOptions;

// Graph interfaces (re-exported from @antv/g6)
interface GraphContainerConfig {
  style?: React.CSSProperties;
  className?: string;
  loading?: boolean;
  loadingTemplate?: React.ReactElement;
  errorTemplate?: (e: Error) => React.ReactNode;
}

interface IGraph {
  // G6 Graph interface methods
  render(): void;
  destroy(): void;
  // Additional G6 methods
}

interface EdgeCfg {
  type?: string;
  style?: any;
  // Additional edge configuration options
}

interface NodeCfg {
  type?: string;
  size?: number | number[];
  style?: any;
  // Additional node configuration options
}

interface MiniMapConfig {
  show?: boolean;
  size?: number[];
  // Additional minimap configuration options
}

type IMarkerCfg = any; // Complex marker configuration type

Re-exported G2Plot Utilities

// G2 grammar of graphics engine
const G2: typeof import('@antv/g2plot').G2;

// Flow utility for data transformation  
function flow(...fns: Function[]): Function;

// Text width measurement utility
function measureTextWidth(text: string, style?: any): number;

// G2Plot chart adaptors
const adaptors: typeof import('@antv/g2plot').adaptors;