Chart elements provide essential components for chart interpretation and interaction, including axes, legends, tooltips, and guide annotations. These elements help users understand and interact with the data visualization.
Axis components provide scales, labels, and reference lines for chart dimensions.
/**
* Axis component for displaying scales and labels
*/
class Axis extends Component<AxisProps> {
constructor(props: AxisProps);
}
/**
* Axis configuration properties
*/
interface AxisProps<TRecord extends DataRecord = DataRecord, TField extends DataField<TRecord> = DataField<TRecord>> {
/** Whether to show this axis */
visible?: boolean;
/** Data field this axis represents */
field: TField;
/** Axis position */
position?: 'right' | 'left' | 'top' | 'bottom';
/** Custom formatter for axis labels */
formatter?: (value: DataValue<TRecord, TField>) => string | number;
/** Axis type */
type?: string;
/** Number of ticks to display */
tickCount?: number;
/** Value range for the axis */
range?: any;
/** Time format mask */
mask?: string;
/** Minimum value */
min?: number;
/** Maximum value */
max?: number;
/** Whether to use nice scale bounds */
nice?: boolean;
/** Custom tick values */
ticks?: Array<any>;
/** Axis styling configuration */
style?: StyleProps;
/** Grid line type */
grid?: 'arc' | 'line';
/** Whether to auto-rotate labels to prevent overlap */
labelAutoRotate?: boolean;
/** Whether to auto-hide overlapping labels */
labelAutoHide?: boolean;
/** Safety distance for overlap detection */
safetyDistance?: number | string;
}
/**
* HOC for creating custom axis components
*/
function withAxis<T>(View: T): T;
/**
* Base axis view component
*/
class AxisView extends Component {}Usage Examples:
import { Axis } from "@antv/f2";
// Basic axes
<Axis field="category" />
<Axis field="value" />
// Formatted axis
<Axis
field="sales"
formatter={(value) => `$${value.toLocaleString()}`}
tickCount={6}
/>
// Time axis
<Axis
field="date"
formatter={(value) => new Date(value).toLocaleDateString()}
tickCount={5}
/>
// Axis with custom range
<Axis
field="score"
range={[0, 100]}
tickCount={6}
formatter={(value) => `${value}%`}
/>Legend components help identify different data series and categories.
/**
* Legend component for displaying data series information
*/
class Legend extends Component<LegendProps> {
constructor(props: LegendProps);
}
/**
* Legend configuration properties
*/
interface LegendProps {
/** Legend position relative to chart */
position?: 'top' | 'right' | 'bottom' | 'left';
/** Legend alignment within position */
align?: 'left' | 'center' | 'right';
/** Spacing between legend items */
itemSpacing?: number;
/** Legend marker shape */
marker?: string;
/** Custom legend items */
items?: LegendItem[];
/** Whether legend is clickable */
clickable?: boolean;
/** Maximum width of legend */
maxWidth?: number;
/** Maximum height of legend */
maxHeight?: number;
}
/**
* Legend item configuration
*/
interface LegendItem {
/** Item name/label */
name: string;
/** Item value */
value: any;
/** Item color */
color: string;
/** Item marker shape */
marker?: string;
}
/**
* HOC for creating custom legend components
*/
function withLegend<T>(View: T): T;
/**
* Base legend view component
*/
class LegendView extends Component {}Usage Examples:
import { Legend } from "@antv/f2";
// Basic legend
<Legend />
// Positioned legend
<Legend position="top" align="center" />
// Custom legend with spacing
<Legend
position="right"
itemSpacing={12}
maxWidth={120}
/>
// Custom legend items
<Legend
items={[
{ name: 'Series A', value: 'a', color: '#1890ff' },
{ name: 'Series B', value: 'b', color: '#52c41a' },
{ name: 'Series C', value: 'c', color: '#fa8c16' }
]}
clickable={true}
/>Interactive tooltip for displaying data details on hover or touch.
/**
* Tooltip component for interactive data display
*/
class Tooltip extends Component<TooltipProps> {
constructor(props: TooltipProps);
}
/**
* Tooltip configuration properties
*/
interface TooltipProps {
/** Whether to show tooltip title */
showTitle?: boolean;
/** Whether to show data point markers */
showMarkers?: boolean;
/** Whether to show crosshair lines */
showCrosshairs?: boolean;
/** Whether tooltip snaps to data points */
snap?: boolean;
/** Custom tooltip content renderer */
custom?: boolean;
/** Tooltip onChange callback */
onChange?: (tooltip: TooltipData) => void;
/** Tooltip container element */
container?: HTMLElement;
/** Tooltip offset from cursor */
offset?: number;
/** Whether tooltip follows cursor */
follow?: boolean;
}
/**
* Tooltip data structure
*/
interface TooltipData {
/** Tooltip title */
title?: string;
/** Array of tooltip items */
items: TooltipItem[];
/** X coordinate */
x: number;
/** Y coordinate */
y: number;
}
/**
* Individual tooltip item
*/
interface TooltipItem {
/** Item name */
name: string;
/** Item value */
value: any;
/** Item color */
color: string;
/** Data point information */
point: any;
}
/**
* HOC for creating custom tooltip components
*/
function withTooltip<T>(View: T): T;
/**
* Base tooltip view component
*/
class TooltipView extends Component {}Usage Examples:
import { Tooltip } from "@antv/f2";
// Basic tooltip
<Tooltip />
// Tooltip with crosshairs
<Tooltip
showCrosshairs={true}
showMarkers={true}
/>
// Custom tooltip
<Tooltip
custom={true}
onChange={(tooltip) => {
console.log('Tooltip data:', tooltip);
// Custom tooltip rendering logic
}}
/>
// Tooltip with container
<Tooltip
container={document.getElementById('tooltip-container')}
follow={false}
offset={10}
/>Guide components provide annotations, reference lines, and additional visual elements.
/**
* Base guide component for annotations
*/
class Guide extends Component<GuideProps> {
constructor(props: GuideProps);
}
/**
* Base guide properties
*/
interface GuideProps {
/** Guide type */
type?: string;
/** Position or data coordinates */
position?: any;
/** Visual styling */
style?: any;
/** Animation configuration */
animate?: AnimationProps;
}
/**
* Text guide for text annotations
*/
class TextGuide extends Guide {
constructor(props: TextGuideProps);
}
interface TextGuideProps extends GuideProps {
/** Text content */
content: string;
/** Text position [x, y] in data coordinates */
position: [any, any];
/** Text styling */
style?: {
fill?: string;
fontSize?: number;
fontFamily?: string;
textAlign?: 'left' | 'center' | 'right';
textBaseline?: 'top' | 'middle' | 'bottom';
};
}
/**
* Line guide for reference lines
*/
class LineGuide extends Guide {
constructor(props: LineGuideProps);
}
interface LineGuideProps extends GuideProps {
/** Line start position [x, y] */
start: [any, any];
/** Line end position [x, y] */
end: [any, any];
/** Line styling */
style?: {
stroke?: string;
lineWidth?: number;
lineDash?: number[];
};
}
/**
* Point guide for point markers
*/
class PointGuide extends Guide {
constructor(props: PointGuideProps);
}
/**
* Rectangle guide for area highlights
*/
class RectGuide extends Guide {
constructor(props: RectGuideProps);
}
/**
* Arc guide for curved annotations
*/
class ArcGuide extends Guide {
constructor(props: ArcGuideProps);
}
/**
* Image guide for image overlays
*/
class ImageGuide extends Guide {
constructor(props: ImageGuideProps);
}
/**
* Tag guide for callout labels
*/
class TagGuide extends Guide {
constructor(props: TagGuideProps);
}
/**
* Lottie guide for animation overlays
*/
class LottieGuide extends Guide {
constructor(props: LottieGuideProps);
}
/**
* Polyline guide for multi-point lines
*/
class PolylineGuide extends Guide {
constructor(props: PolylineGuideProps);
}
/**
* HOC for creating custom guide components
*/
function withGuide<T>(View: T): T;Usage Examples:
import { TextGuide, LineGuide, Guide } from "@antv/f2";
// Text annotation
<TextGuide
content="Peak Value"
position={['2023-06-15', 150]}
style={{
fill: '#ff4d4f',
fontSize: 14,
textAlign: 'center'
}}
/>
// Reference line
<LineGuide
start={['min', 100]}
end={['max', 100]}
style={{
stroke: '#ff4d4f',
lineWidth: 2,
lineDash: [4, 4]
}}
/>
// Multiple guides
<Guide>
<TextGuide content="Average" position={['2023-06-01', 75]} />
<LineGuide
start={['min', 75]}
end={['max', 75]}
style={{ stroke: '#52c41a', lineDash: [2, 2] }}
/>
</Guide>