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.
Creates area charts for visualizing continuous data with filled regions.
/**
* Area chart component for continuous data visualization
* @param props - Area chart configuration extending G2Plot AreaOptions
* @returns React component
*/
function Area(props: AreaConfig): JSX.Element;
interface AreaConfig extends AreaOptions, ContainerConfig<AreaOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Area } from "@ant-design/charts";
const AreaExample = () => {
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 <Area {...config} />;
};Creates horizontal bar charts for categorical data comparison.
/**
* Horizontal bar chart component
* @param props - Bar chart configuration extending G2Plot BarOptions
* @returns React component
*/
function Bar(props: BarConfig): JSX.Element;
interface BarConfig extends BarOptions, ContainerConfig<BarOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Bar } from "@ant-design/charts";
const BarExample = () => {
const data = [
{ type: 'A', value: 38 },
{ type: 'B', value: 52 },
{ type: 'C', value: 61 },
{ type: 'D', value: 45 },
];
const config = {
data,
xField: 'value',
yField: 'type',
};
return <Bar {...config} />;
};Creates vertical column charts for categorical data comparison.
/**
* Vertical column chart component
* @param props - Column chart configuration extending G2Plot ColumnOptions
* @returns React component
*/
function Column(props: ColumnConfig): JSX.Element;
interface ColumnConfig extends ColumnOptions, ContainerConfig<ColumnOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Column } from "@ant-design/charts";
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} />;
};Creates line charts for trend analysis and time series data.
/**
* Line chart component for trend analysis
* @param props - Line chart configuration extending G2Plot LineOptions
* @returns React component
*/
function Line(props: LineConfig): JSX.Element;
interface LineConfig extends LineOptions, ContainerConfig<LineOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Line } from "@ant-design/charts";
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} />;
};Creates pie charts for proportional data visualization.
/**
* Pie chart component for proportional data
* @param props - Pie chart configuration extending G2Plot PieOptions
* @returns React component
*/
function Pie(props: PieConfig): JSX.Element;
interface PieConfig extends PieOptions, ContainerConfig<PieOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Pie } from "@ant-design/charts";
const PieExample = () => {
const data = [
{ type: 'A', value: 27 },
{ type: 'B', value: 25 },
{ type: 'C', value: 18 },
{ type: 'D', value: 15 },
{ type: 'E', value: 10 },
{ type: 'Other', value: 5 },
];
const config = {
data,
angleField: 'value',
colorField: 'type',
radius: 0.8,
};
return <Pie {...config} />;
};Creates scatter plots for correlation analysis between two variables.
/**
* Scatter plot component for correlation analysis
* @param props - Scatter plot configuration extending G2Plot ScatterOptions
* @returns React component
*/
function Scatter(props: ScatterConfig): JSX.Element;
interface ScatterConfig extends ScatterOptions, ContainerConfig<ScatterOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Scatter } from "@ant-design/charts";
const ScatterExample = () => {
const data = [
{ x: 1, y: 2 },
{ x: 2, y: 5 },
{ x: 3, y: 3 },
{ x: 4, y: 8 },
{ x: 5, y: 7 },
];
const config = {
data,
xField: 'x',
yField: 'y',
size: 4,
};
return <Scatter {...config} />;
};Creates histograms for distribution analysis of continuous data.
/**
* Histogram component for distribution analysis
* @param props - Histogram configuration extending G2Plot HistogramOptions
* @returns React component
*/
function Histogram(props: HistogramConfig): JSX.Element;
interface HistogramConfig extends HistogramOptions, ContainerConfig<HistogramOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Histogram } from "@ant-design/charts";
const HistogramExample = () => {
const data = [
{ value: 1.2 },
{ value: 3.4 },
{ value: 3.7 },
{ value: 4.3 },
{ value: 5.2 },
// ... more data points
];
const config = {
data,
binField: 'value',
binWidth: 2,
};
return <Histogram {...config} />;
};Creates box plots for statistical summaries and outlier detection.
/**
* Box plot component for statistical summaries
* @param props - Box plot configuration extending G2Plot BoxOptions
* @returns React component
*/
function Box(props: BoxConfig): JSX.Element;
interface BoxConfig extends BoxOptions, ContainerConfig<BoxOptions> {
chartRef?: ChartRefConfig;
}Usage Example:
import { Box } from "@ant-design/charts";
const BoxExample = () => {
const data = [
{ x: 'A', low: 1, q1: 9, median: 16, q3: 22, high: 24 },
{ x: 'B', low: 6, q1: 12, median: 18, q3: 25, high: 28 },
{ x: 'C', low: 3, q1: 8, median: 12, q3: 20, high: 25 },
];
const config = {
data,
xField: 'x',
yField: ['low', 'q1', 'median', 'q3', 'high'],
};
return <Box {...config} />;
};