Basic Chart Types

/**
 * Line chart component for trend visualization
 */
const Line: ForwardRefExoticComponent<PropsWithoutRef<LineConfig> & RefAttributes<Chart>>;

interface LineConfig extends CommonConfig<LineOptions> {}

interface LineOptions extends Options {
  /** Connect null values in the line */
  readonly connectNulls?: ConnectNulls;
}

type ConnectNulls = true | {
  connect: true;
  /** Connection line styles with 'connect' prefix */
  [key: string]: any;
};

import React from "react";
import { Line } from "@ant-design/plots";

const data = [
  { month: 'Jan', sales: 1000 },
  { month: 'Feb', sales: 1200 },
  { month: 'Mar', sales: null }, // null value
  { month: 'Apr', sales: 1800 },
];

const config = {
  data,
  xField: 'month',
  yField: 'sales',
  connectNulls: {
    connect: true,
    connectStroke: '#ccc',
    connectLineDash: [4, 4],
  },
};

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

/**
 * Column chart component for categorical data visualization
 */
const Column: ForwardRefExoticComponent<PropsWithoutRef<ColumnConfig> & RefAttributes<Chart>>;

interface ColumnConfig extends CommonConfig<ColumnOptions> {}

interface ColumnOptions extends Options {
  // Inherits all base options for column-specific configuration
}

import React from "react";
import { Column } from "@ant-design/plots";

const data = [
  { category: 'A', value: 40 },
  { category: 'B', value: 21 },
  { category: 'C', value: 17 },
  { category: 'D', value: 13 },
];

const config = {
  data,
  xField: 'category',
  yField: 'value',
  label: {
    position: 'middle',
    style: { fill: 'white' },
  },
};

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

/**
 * Bar chart component for horizontal categorical data visualization
 */
const Bar: ForwardRefExoticComponent<PropsWithoutRef<BarConfig> & RefAttributes<Chart>>;

interface BarConfig extends CommonConfig<BarOptions> {}

interface BarOptions extends Options {
  // Inherits all base options for bar-specific configuration
}

import React from "react";
import { Bar } from "@ant-design/plots";

const data = [
  { category: 'Category A', value: 40 },
  { category: 'Category B', value: 21 },
  { category: 'Category C', value: 17 },
];

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

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

/**
 * Area chart component for cumulative data visualization
 */
const Area: ForwardRefExoticComponent<PropsWithoutRef<AreaConfig> & RefAttributes<Chart>>;

interface AreaConfig extends CommonConfig<AreaOptions> {}

interface AreaOptions extends Options {
  // Inherits all base options for area-specific configuration
}

import React from "react";
import { Area } from "@ant-design/plots";

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
];

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

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

/**
 * Pie chart component for proportional data visualization
 */
const Pie: ForwardRefExoticComponent<PropsWithoutRef<PieConfig> & RefAttributes<Chart>>;

interface PieConfig extends CommonConfig<PieOptions> {}

interface PieOptions extends Options, ArcBaseOptions {
  // Combines base options with arc-specific options
}

interface ArcBaseOptions {
  /** Angle mapping field */
  readonly angleField: string;
  /** Pie chart radius */
  readonly radius?: number;
  /** Pie chart inner radius for donut charts */
  readonly innerRadius?: number;
}

import React from "react";
import { Pie } from "@ant-design/plots";

const data = [
  { type: 'A', value: 27 },
  { type: 'B', value: 25 },
  { type: 'C', value: 18 },
  { type: 'D', value: 15 },
  { type: 'E', value: 10 },
  { type: 'F', value: 5 },
];

const config = {
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'outer',
    content: '{name} {percentage}',
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
};

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

/**
 * Scatter plot component for correlation visualization
 */
const Scatter: ForwardRefExoticComponent<PropsWithoutRef<ScatterConfig> & RefAttributes<Chart>>;

interface ScatterConfig extends CommonConfig<ScatterOptions> {}

interface ScatterOptions extends Options {
  // Inherits all base options for scatter-specific configuration
}

import React from "react";
import { Scatter } from "@ant-design/plots";

const data = [
  { height: 161.2, weight: 51.6, gender: 'female' },
  { height: 167.5, weight: 59, gender: 'female' },
  { height: 159.5, weight: 49.2, gender: 'female' },
  { height: 175.0, weight: 73.2, gender: 'male' },
  { height: 154.2, weight: 46.6, gender: 'female' },
];

const config = {
  data,
  xField: 'height',
  yField: 'weight',
  colorField: 'gender',
  size: 4,
  shape: 'circle',
  pointStyle: {
    fillOpacity: 0.8,
  },
};

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

interface Options extends Spec, BaseOptions {
  /** Chart annotations */
  annotations?: Array<Options & { type: unknown }>;
  /** Line configuration for area charts */
  line?: Options;
  /** Area configuration for line charts */
  area?: Options;
  /** Point configuration for line/area charts */
  point?: Options;
  /** Nested views for complex charts */
  children?: Array<Options & { type: unknown }>;
}

interface BaseOptions {
  /** X-axis field mapping */
  readonly xField?: PrimitiveEncodeSpec;
  /** Y-axis field mapping */
  readonly yField?: PrimitiveEncodeSpec;
  /** Series field for grouping */
  readonly seriesField?: PrimitiveEncodeSpec;
  /** Size field mapping */
  readonly sizeField?: PrimitiveEncodeSpec;
  /** Color field mapping */
  readonly colorField?: PrimitiveEncodeSpec;
  /** Shape field mapping */
  readonly shapeField?: PrimitiveEncodeSpec;
  /** Key field for data identification */
  readonly keyField?: PrimitiveEncodeSpec;
  /** Enable stacking */
  readonly stack?: boolean | StackYTransform;
  /** Enable normalization */
  readonly normalize?: boolean | NormalizeYTransform;
  /** Enable sorting */
  readonly sort?: boolean | SortByTransform;
  /** Enable grouping */
  readonly group?: boolean | DodgeXTransform;
  /** Label configuration */
  readonly label?: false | Record<string, any>;
  /** Transpose the chart */
  readonly transpose?: boolean;
}

type PrimitiveEncodeSpec = Primitive | FunctionEncodeSpec;
type Primitive = number | string | boolean | Date | string[];
type FunctionEncodeSpec = (value: any, index?: number, array?: any[]) => Primitive;