Geometry components are the core visualization elements that represent data through different graphical forms following the Grammar of Graphics principles. Each geometry type creates different visual representations (lines, areas, bars, points) of the same underlying data.
Base geometry component that provides common functionality for all geometry types.
/**
* Base geometry component with common properties and methods
*/
class Geometry<TRecord extends DataRecord = DataRecord, IProps extends GeometryProps<TRecord> = GeometryProps<TRecord>> extends Component<IProps> {
constructor(props: IProps);
}
/**
* Base geometry properties interface
*/
interface GeometryProps<TRecord extends DataRecord = DataRecord> {
/** Data for this geometry (inherits from parent Chart if not specified) */
data?: Data<TRecord>;
/** Color mapping - field name, value, or callback function */
color?: string | DataField | ColorCallback<TRecord>;
/** Shape mapping - field name, value, or callback function */
shape?: string | DataField | ShapeCallback<TRecord>;
/** Size mapping - field name, value, or callback function */
size?: string | number | DataField | SizeCallback<TRecord>;
/** Data adjustment for grouping/stacking */
adjust?: AdjustType | AdjustProps;
/** Animation configuration */
animate?: AnimationProps;
/** Visual styling properties */
style?: GroupStyleProps;
}Creates line charts for showing trends and relationships over continuous data.
/**
* Line geometry component for creating line charts
*/
class Line<TRecord extends DataRecord = DataRecord> extends Geometry<TRecord, LineProps<TRecord>> {
constructor(props: LineProps<TRecord>);
}
/**
* Line-specific properties
*/
interface LineProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
/** Whether to connect null values with a line */
connectNulls?: boolean;
/** Size zoom ratio for line thickness */
sizeZoom?: number | ZoomRatioCallback<TRecord>;
/** Custom end view component */
endView?: any;
}
/**
* HOC for creating custom line components
*/
function withLine<T>(View: T): T;
/**
* Base line view component
*/
class LineView extends Component {}Usage Examples:
import { Line } from "@antv/f2";
// Basic line chart
<Line x="date" y="value" color="series" />
// Line with null handling
<Line
x="date"
y="value"
color="series"
connectNulls={true}
/>
// Line with custom styling
<Line
x="date"
y="value"
color="red"
size={3}
style={{ stroke: '#ff4d4f', lineWidth: 2 }}
/>
// Line with size variation
<Line
x="date"
y="value"
size="importance"
sizeZoom={0.5}
/>Creates area charts for showing quantities over time or categories.
/**
* Area geometry component for creating area charts
*/
class Area<TRecord extends DataRecord = DataRecord> extends Geometry<TRecord, AreaProps<TRecord>> {
constructor(props: AreaProps<TRecord>);
}
/**
* Area-specific properties
*/
interface AreaProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
/** Whether to connect null values with area fill */
connectNulls?: boolean;
}
/**
* HOC for creating custom area components
*/
function withArea<T>(View: T): T;
/**
* Base area view component
*/
class AreaView extends Component {}Usage Examples:
import { Area } from "@antv/f2";
// Basic area chart
<Area x="date" y="value" color="category" />
// Stacked area chart
<Area
x="date"
y="value"
color="category"
adjust="stack"
/>
// Area with gradient fill
<Area
x="date"
y="value"
color="l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
/>Creates bar/column charts for categorical data comparison.
/**
* Interval geometry component for creating bar/column charts
*/
class Interval<TRecord extends DataRecord = DataRecord> extends Geometry<TRecord, IntervalProps<TRecord>> {
constructor(props: IntervalProps<TRecord>);
}
/**
* Interval-specific properties
*/
interface IntervalProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
/** Size zoom ratio for bar width */
sizeZoom?: number | ZoomRatioCallback<TRecord>;
}
/**
* HOC for creating custom interval components
*/
function withInterval<T>(View: T): T;
/**
* Base interval view component
*/
class IntervalView extends Component {}Usage Examples:
import { Interval } from "@antv/f2";
// Basic bar chart
<Interval x="category" y="value" color="category" />
// Grouped bar chart
<Interval
x="category"
y="value"
color="series"
adjust="dodge"
/>
// Stacked bar chart
<Interval
x="category"
y="value"
color="series"
adjust="stack"
/>
// Horizontal bar chart (with transposed coordinate)
<Chart coord={{ type: 'cartesian', transposed: true }}>
<Interval x="category" y="value" color="category" />
</Chart>Creates scatter plots and point-based visualizations.
/**
* Point geometry component for creating scatter plots
*/
class Point<TRecord extends DataRecord = DataRecord> extends Geometry<TRecord, PointProps<TRecord>> {
constructor(props: PointProps<TRecord>);
}
/**
* Point-specific properties
*/
interface PointProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
// No additional properties beyond base GeometryProps
}
/**
* HOC for creating custom point components
*/
function withPoint<T>(View: T): T;
/**
* Base point view component
*/
class PointView extends Component {}Usage Examples:
import { Point } from "@antv/f2";
// Basic scatter plot
<Point x="height" y="weight" color="gender" />
// Bubble chart (size variation)
<Point
x="income"
y="happiness"
size="population"
color="country"
/>
// Point with custom shapes
<Point
x="x"
y="y"
shape="category"
color="category"
/>Data adjustment systems for handling overlapping data points.
/**
* Adjustment types for handling data overlap
*/
type AdjustType = 'stack' | 'dodge' | 'jitter' | 'symmetric';
/**
* Adjustment configuration
*/
interface AdjustProps {
/** Type of adjustment to apply */
type: AdjustType;
/** Margin ratio for dodge adjustment (0-1) */
marginRatio?: number;
/** Dodge ratio for spacing between groups (0-1) */
dodgeRatio?: number;
}Usage Examples:
// Stack adjustment - stack values on top of each other
<Interval
x="month"
y="sales"
color="product"
adjust="stack"
/>
// Dodge adjustment - place side by side
<Interval
x="month"
y="sales"
color="product"
adjust={{ type: 'dodge', marginRatio: 0.1, dodgeRatio: 0.8 }}
/>
// Jitter adjustment - add random offset to avoid overlap
<Point
x="category"
y="value"
adjust="jitter"
/>
// Symmetric adjustment - symmetric stacking from center
<Area
x="x"
y="y"
color="series"
adjust="symmetric"
/>Mapping data to visual properties like color, shape, and size.
/**
* Color mapping callback function
*/
type ColorCallback<TRecord> = (record: TRecord) => string;
/**
* Shape mapping callback function
*/
type ShapeCallback<TRecord> = (record: TRecord) => string;
/**
* Size mapping callback function
*/
type SizeCallback<TRecord> = (record: TRecord) => number;
/**
* Zoom ratio callback for dynamic sizing
*/
type ZoomRatioCallback<TRecord> = (record: TRecord) => number | null | undefined;Usage Examples:
// Color by data field
<Interval x="category" y="value" color="category" />
// Color by callback function
<Point
x="x"
y="y"
color={(record) => record.value > 100 ? 'red' : 'blue'}
/>
// Size by data field with zoom
<Point
x="x"
y="y"
size="importance"
sizeZoom={(record) => record.highlighted ? 1.5 : 1.0}
/>
// Shape by data field
<Point
x="x"
y="y"
shape="type"
color="category"
/>