F2 provides pre-built specialized chart components for specific visualization needs, including hierarchical data (treemap, sunburst), gauges, financial charts (candlestick), and custom pictorial charts.
Hierarchical data visualization using nested rectangles.
/**
* Treemap component for hierarchical data visualization
*/
class Treemap extends Component<TreemapProps> {
constructor(props: TreemapProps);
}
/**
* Treemap configuration properties
*/
interface TreemapProps {
/** Hierarchical data structure */
data: TreemapData;
/** Color mapping field or function */
color?: string | ((node: TreemapNode) => string);
/** Inner padding between rectangles */
paddingInner?: number;
/** Outer padding around treemap */
paddingOuter?: number;
/** Custom tile method */
tile?: (node: TreemapNode) => void;
}
/**
* Treemap data structure
*/
interface TreemapData {
/** Node name */
name: string;
/** Node value */
value?: number;
/** Child nodes */
children?: TreemapData[];
}
/**
* Treemap node information
*/
interface TreemapNode {
/** Node data */
data: TreemapData;
/** Node value */
value: number;
/** Node depth in hierarchy */
depth: number;
/** Node bounds */
x0: number;
y0: number;
x1: number;
y1: number;
}
/**
* HOC for creating custom treemap components
*/
function withTreemap<T>(View: T): T;
/**
* Base treemap view component
*/
class TreemapView extends Component {}Usage Examples:
import { Treemap } from "@antv/f2";
// Basic treemap
const treemapData = {
name: "root",
children: [
{
name: "Technology",
children: [
{ name: "Mobile", value: 45 },
{ name: "Web", value: 30 },
{ name: "Desktop", value: 25 }
]
},
{
name: "Marketing",
children: [
{ name: "Digital", value: 35 },
{ name: "Traditional", value: 20 }
]
}
]
};
<Treemap
data={treemapData}
color={(node) => node.depth === 1 ? '#1890ff' : '#91d5ff'}
paddingInner={2}
paddingOuter={4}
/>Radial hierarchical data visualization.
/**
* Sunburst component for radial hierarchical visualization
*/
class Sunburst extends Component<SunburstProps> {
constructor(props: SunburstProps);
}
/**
* Sunburst configuration properties
*/
interface SunburstProps {
/** Hierarchical data structure */
data: SunburstData;
/** Color mapping field or function */
color?: string | ((node: SunburstNode) => string);
/** Inner radius (0-1) */
innerRadius?: number;
/** Outer radius (0-1) */
outerRadius?: number;
/** Start angle in radians */
startAngle?: number;
/** End angle in radians */
endAngle?: number;
/** Padding between arcs */
padAngle?: number;
}
/**
* Sunburst data structure
*/
interface SunburstData {
/** Node name */
name: string;
/** Node value */
value?: number;
/** Child nodes */
children?: SunburstData[];
}
/**
* Sunburst node information
*/
interface SunburstNode {
/** Node data */
data: SunburstData;
/** Node value */
value: number;
/** Node depth */
depth: number;
/** Start angle */
x0: number;
/** End angle */
x1: number;
/** Inner radius */
y0: number;
/** Outer radius */
y1: number;
}
/**
* HOC for creating custom sunburst components
*/
function withSunburst<T>(View: T): T;
/**
* Base sunburst view component
*/
class SunburstView extends Component {}Usage Examples:
import { Sunburst } from "@antv/f2";
// Basic sunburst
const sunburstData = {
name: "Total Sales",
children: [
{
name: "Q1",
children: [
{ name: "Jan", value: 100 },
{ name: "Feb", value: 120 },
{ name: "Mar", value: 150 }
]
},
{
name: "Q2",
children: [
{ name: "Apr", value: 130 },
{ name: "May", value: 140 },
{ name: "Jun", value: 160 }
]
}
]
};
<Sunburst
data={sunburstData}
innerRadius={0.3}
outerRadius={0.9}
color={(node) => {
const colors = ['#1890ff', '#52c41a', '#fa8c16', '#eb2f96'];
return colors[node.depth % colors.length];
}}
/>Gauge visualization for showing single values against a scale.
/**
* Gauge component for circular progress/meter visualization
*/
class Gauge extends Component<GaugeProps> {
constructor(props: GaugeProps);
}
/**
* Gauge configuration properties
*/
interface GaugeProps {
/** Gauge data - typically single value */
data: GaugeData[];
/** Start angle in radians (default: -ฯ) */
startAngle?: number;
/** End angle in radians (default: 0) */
endAngle?: number;
/** Inner radius (0-1, default: 0.6) */
innerRadius?: number;
/** Outer radius (0-1, default: 0.9) */
outerRadius?: number;
/** Gauge color or color mapping */
color?: string | ((value: number) => string);
/** Tick count for gauge scale */
tickCount?: number;
/** Range of gauge values [min, max] */
range?: [number, number];
}
/**
* Gauge data structure
*/
interface GaugeData {
/** Gauge name/label */
name: string;
/** Current value */
value: number;
}
/**
* HOC for creating custom gauge components
*/
function withGauge<T>(View: T): T;
/**
* Base gauge view component
*/
class GaugeView extends Component {}Usage Examples:
import { Gauge } from "@antv/f2";
// Basic gauge
const gaugeData = [{ name: 'Speed', value: 75 }];
<Gauge
data={gaugeData}
range={[0, 100]}
startAngle={-Math.PI}
endAngle={0}
color={(value) => {
if (value < 50) return '#52c41a';
if (value < 80) return '#fa8c16';
return '#ff4d4f';
}}
/>
// Semi-circle gauge
<Gauge
data={[{ name: 'Progress', value: 65 }]}
startAngle={-Math.PI / 2}
endAngle={Math.PI / 2}
innerRadius={0.7}
outerRadius={0.95}
tickCount={6}
/>Financial chart for displaying OHLC (Open, High, Low, Close) data.
/**
* Candlestick component for financial data visualization
*/
class Candlestick extends Component<CandlestickProps> {
constructor(props: CandlestickProps);
}
/**
* Candlestick configuration properties
*/
interface CandlestickProps extends GeometryProps {
/** Open price field name */
open?: string;
/** High price field name */
high?: string;
/** Low price field name */
low?: string;
/** Close price field name */
close?: string;
/** Rising candle color */
risingFill?: string;
/** Falling candle color */
fallingFill?: string;
}
/**
* HOC for creating custom candlestick components
*/
function withCandlestick<T>(View: T): T;
/**
* Base candlestick view component
*/
class CandlestickView extends Component {}Usage Examples:
import { Candlestick } from "@antv/f2";
// Basic candlestick chart
const ohlcData = [
{ date: '2023-01-01', open: 100, high: 110, low: 95, close: 105 },
{ date: '2023-01-02', open: 105, high: 108, low: 102, close: 103 },
{ date: '2023-01-03', open: 103, high: 115, low: 100, close: 112 },
];
<Chart data={ohlcData}>
<Candlestick
x="date"
open="open"
high="high"
low="low"
close="close"
risingFill="#52c41a"
fallingFill="#ff4d4f"
/>
</Chart>Specialized labeling for pie/donut charts.
/**
* PieLabel component for pie chart labeling
*/
class PieLabel extends Component<PieLabelProps> {
constructor(props: PieLabelProps);
}
/**
* Pie label configuration properties
*/
interface PieLabelProps {
/** Label content field or function */
content?: string | ((data: any) => string);
/** Label positioning */
label1?: any;
label2?: any;
/** Guide line configuration */
guideLine?: {
/** Whether to show guide lines */
show?: boolean;
/** Guide line style */
style?: {
stroke?: string;
lineWidth?: number;
};
};
}
/**
* HOC for creating custom pie label components
*/
function withPieLabel<T>(View: T): T;
/**
* Base pie label view component
*/
class PieLabelView extends Component {}Usage Examples:
import { PieLabel, Interval } from "@antv/f2";
// Pie chart with labels
const pieData = [
{ category: 'A', value: 30 },
{ category: 'B', value: 25 },
{ category: 'C', value: 45 }
];
<Chart data={pieData} coord={{ type: 'polar' }}>
<Interval
x="1"
y="value"
color="category"
adjust="stack"
/>
<PieLabel
content={(data) => `${data.category}: ${data.value}%`}
guideLine={{ show: true }}
/>
</Chart>Custom pictorial bar charts with shape-based visualization.
/**
* Pictorial component for shape-based bar charts
*/
class Pictorial extends Component<PictorialProps> {
constructor(props: PictorialProps);
}
/**
* Pictorial configuration properties
*/
interface PictorialProps {
/** Data for pictorial chart */
data: any[];
/** Shape symbol or image */
symbol?: string;
/** Symbol size scaling */
symbolSize?: number | ((data: any) => number);
/** Symbol positioning */
symbolPosition?: 'start' | 'middle' | 'end';
/** Symbol repeat mode */
symbolRepeat?: boolean;
/** Symbol margin */
symbolMargin?: number;
}Usage Examples:
import { Pictorial } from "@antv/f2";
// Pictorial bar chart
const pictorialData = [
{ category: 'Apples', value: 45, symbol: '๐' },
{ category: 'Oranges', value: 30, symbol: '๐' },
{ category: 'Bananas', value: 25, symbol: '๐' }
];
<Pictorial
data={pictorialData}
x="category"
y="value"
symbol={(data) => data.symbol}
symbolRepeat={true}
symbolSize={20}
/>