CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-antv--f2

Charts for mobile visualization with Grammar of Graphics approach

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

F2

F2 is a mobile-first data visualization library that provides a comprehensive charting solution specifically designed for mobile devices and H5 environments. Built on the Grammar of Graphics theory, it offers flexible data-driven chart construction capabilities that can create 50+ different chart types through composable graphical elements.

Package Information

  • Package Name: @antv/f2
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @antv/f2

Core Imports

import { 
  Chart, Canvas, Component, jsx, createRef, 
  Line, Area, Interval, Point, 
  Axis, Legend, Tooltip, Guide,
  Treemap, Sunburst, Gauge, Candlestick, PieLabel, Pictorial,
  Zoom, ScrollBar, Magnifier,
  Scale, Linear, Category, Time, Log, Pow, TimeCat, Quantize, Quantile, Identity
} from "@antv/f2";

For CommonJS:

const { 
  Chart, Canvas, Component, jsx, createRef,
  Line, Area, Interval, Point,
  Axis, Legend, Tooltip, Guide,
  Treemap, Sunburst, Gauge, Candlestick, PieLabel, Pictorial,
  Zoom, ScrollBar, Magnifier,
  Scale, Linear, Category, Time, Log, Pow, TimeCat, Quantize, Quantile, Identity
} = require("@antv/f2");

JSX Runtime:

import { jsx } from "@antv/f2/jsx-runtime";

Basic Usage

import { Chart, Canvas, Axis, Interval, Tooltip } from "@antv/f2";

// Sample data
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Get canvas context
const context = document.getElementById('chart').getContext('2d');

// Create chart with JSX-like syntax
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

// Render the chart
const canvas = new Canvas(props);
await canvas.render();

Architecture

F2 is built around several key architectural components:

  • Grammar of Graphics: Composable chart elements following the GoG principle
  • Component System: React-like component architecture with JSX support via F-Engine
  • Rendering Engine: Canvas-based rendering optimized for mobile performance
  • Scale System: Comprehensive scale types for data mapping (linear, categorical, time, etc.)
  • Coordinate System: Flexible coordinate transformations and projections
  • Theme System: Configurable styling and theming capabilities
  • Multi-Platform: Cross-platform support for web, Node.js, mini-programs, React Native

Capabilities

Core Chart Component

The main Chart component that serves as the container for all chart elements and manages data, scales, and coordinate systems.

interface ChartProps<TRecord extends DataRecord = DataRecord> {
  data: Data<TRecord>;
  scale?: DataRecordScale<TRecord>;  
  coord?: CoordType | CoordProps;
  style?: GroupStyleProps;
  theme?: Record<string, any>;
  children?: any;
}

class Chart<TRecord extends DataRecord = DataRecord> extends Component<ChartProps<TRecord>> {
  constructor(props: ChartProps<TRecord>);
}

Chart Component

Geometry Components

Core geometry components for creating different chart types through the Grammar of Graphics approach.

// Base geometry interface
interface GeometryProps<TRecord extends DataRecord = DataRecord> {
  x: DataField<TRecord>;
  y: DataField<TRecord>;
  data?: Data<TRecord>;
  color?: DataField<TRecord> | string | [string, any[]] | ColorAttrObject;
  shape?: DataField<TRecord> | string | [string, any[]] | ShapeAttrObject;
  size?: DataField<TRecord> | number | string | [string, any[]] | SizeAttrObject;
  adjust?: AdjustType | AdjustProps;
  startOnZero?: boolean;
  style?: any;
  animation?: AnimationProps;
  viewClip?: boolean;
  onPress?: Function;
  onPan?: Function;
  onPressStart?: Function;
  onPressEnd?: Function;
  onPanStart?: Function;
  onPanEnd?: Function;
}

// Line geometry
interface LineProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
  connectNulls?: boolean;
  sizeZoom?: number | ZoomRatioCallback<TRecord>;
  endView?: any;
}

// Area geometry  
interface AreaProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
  connectNulls?: boolean;
}

// Interval/Bar geometry
interface IntervalProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
  sizeZoom?: number | ZoomRatioCallback<TRecord>;
}

// Point geometry
interface PointProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
}

Geometry Components

Chart Elements

Essential chart elements for axes, legends, tooltips, and annotations.

// Axis component
interface AxisProps<
  TRecord extends DataRecord = DataRecord,
  TField extends DataField<TRecord> = DataField<TRecord>
> {
  visible?: boolean;
  field: TField;
  position?: 'right' | 'left' | 'top' | 'bottom';
  formatter?: (value: DataValue<TRecord, TField>) => string | number;
  type?: string;
  tickCount?: number;
  range?: any;
  mask?: string;
  min?: number;
  max?: number;
  nice?: boolean;
  ticks?: any[];
  style?: StyleProps;
  grid?: 'arc' | 'line';
  labelAutoRotate?: boolean;
  labelAutoHide?: boolean;
  safetyDistance?: number | string;
}

// Legend component  
interface LegendProps {
  position?: 'top' | 'right' | 'bottom' | 'left';
  align?: 'left' | 'center' | 'right';
  itemSpacing?: number;
  marker?: string;
}

// Tooltip component
interface TooltipProps {
  showTitle?: boolean;
  showMarkers?: boolean;
  showCrosshairs?: boolean;
  snap?: boolean;
  onChange?: (tooltip: any) => void;
}

Chart Elements

Specialized Charts

Pre-built specialized chart components for specific visualization needs.

// Treemap visualization
interface TreemapProps {
  data: any[];
  color?: string;
  paddingInner?: number;
  paddingOuter?: number;
}

// Sunburst chart
interface SunburstProps {
  data: any[];
  color?: string;
  innerRadius?: number;
  outerRadius?: number;
}

// Gauge chart
interface GaugeProps {
  data: any[];
  startAngle?: number;
  endAngle?: number;
  innerRadius?: number;
  outerRadius?: number;
}

// Candlestick chart
interface CandlestickProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
  open?: string;
  high?: string;  
  low?: string;
  close?: string;
}

// Pictorial chart
interface PictorialProps<TRecord extends DataRecord = DataRecord> extends GeometryProps<TRecord> {
  symbol?: any;
}

// Pie label component
interface PieLabelProps {
  anchorOffset?: string | number;
  inflectionOffset?: string | number;
  label1?: any;
  label2?: any;
  sidePadding?: string | number;
  triggerOn?: 'click' | 'press';
  onClick?: (ev: any) => void;
  adjustRatio?: number;
  type?: 'default' | 'spider';
}

Specialized Charts

Scale System

Comprehensive scale system for mapping data values to visual properties.

// Scale configuration
interface ScaleConfig {
  type?: string;
  domain?: any[];
  range?: any[];
  tickCount?: number;
  formatter?: (value: any, index: number) => string;
}

// Main scale classes
class Scale {
  constructor(cfg: ScaleConfig);
  scale(value: any): any;
  invert(value: any): any;
  getTicks(): any[];
  getText(value: any): string;
  translate(value: any): any;
}

class Linear extends Scale {}
class Category extends Scale {}
class Time extends Scale {}
class TimeCat extends Scale {}
class Log extends Scale {}
class Pow extends Scale {}
class Quantize extends Scale {}
class Quantile extends Scale {}
class Identity extends Scale {}

// Scale factory functions
function getScale(type: string): typeof Scale;
function registerScale(type: string, ctor: typeof Scale): void;
function getTickMethod(method: string): any;
function registerTickMethod(method: string, fn: any): void;

Scale System

Interactions

Interactive components for zoom, pan, brush selection, and other user interactions.

// Zoom interaction
interface ZoomProps {
  mode?: 'x' | 'y' | 'xy';
  pan?: boolean;
  pinch?: boolean;
  onStart?: (ev: any) => void;
  onChange?: (ev: any) => void;  
  onEnd?: (ev: any) => void;
}

// ScrollBar component
interface ScrollBarProps {
  mode?: 'x' | 'y';
  range?: [number, number];
  onChange?: (range: [number, number]) => void;
}

// Magnifier component
interface MagnifierProps {
  focusRange: [number, number];
  radius?: number | string;
  position?: [number, number] | [string, string];
  chart?: any;
  coord?: any;
  offsetX?: number | string;
  offsetY?: number | string;
  lineStyle?: { [key: string]: any };
  frameStyle?: { [key: string]: any };
  referenceLines?: Array<{
    records: any;
    style?: {
      stroke?: string;
      lineWidth?: number;
      lineDash?: number[];
    };
  }>;
}

Interactions

Core Types

// Base data types
type DataRecord = Record<string, any>;
type Data<TRecord extends DataRecord = DataRecord> = TRecord[];
type DataField<TRecord extends DataRecord> = keyof TRecord;
type DataValue<TRecord extends DataRecord, TField extends DataField<TRecord>> = TRecord[TField];

// Callback types
type ColorCallback<TRecord> = (record: TRecord) => string;
type ShapeCallback<TRecord> = (record: TRecord) => string;  
type SizeCallback<TRecord> = (record: TRecord) => number;
type ZoomRatioCallback<TRecord> = (record: TRecord) => number | null | undefined;

// Attribute configuration objects
interface ColorAttrObject {
  type?: string;
  field?: string;
  range?: any[];
  callback?: (...args) => any;
  scale?: any;
}

interface SizeAttrObject {
  type?: string;
  field?: string;
  range?: any[];
  callback?: (...args) => any;
  scale?: any;
}

interface ShapeAttrObject {
  type?: string;
  field?: string;
  range?: any[];
  callback?: (...args) => any;
  scale?: any;
}

// Coordinate system types
type CoordType = 'cartesian' | 'polar' | 'helix' | 'rect';
interface CoordProps {
  type: CoordType;
  transposed?: boolean;
  startAngle?: number;
  endAngle?: number;
  innerRadius?: number;
  radius?: number;
}

// Adjustment types
type AdjustType = 'stack' | 'dodge' | 'jitter' | 'symmetric';
interface AdjustProps {
  type: AdjustType;
  marginRatio?: number;
  dodgeRatio?: number;
}

// Layout and styling
interface LayoutProps {
  left?: number;
  top?: number; 
  width?: number;
  height?: number;
}

interface GroupStyleProps {
  fill?: string;
  stroke?: string;
  lineWidth?: number;
  opacity?: number;
}

// Styling types
interface StyleProps {
  width?: number | string;
  height?: number | string;
  label?: any;
  grid?: any;
  labelOffset?: number | string;
}

// Animation
interface AnimationProps {
  appear?: boolean;
  enter?: boolean;
  leave?: boolean;
  update?: boolean;
  duration?: number;
  easing?: string;
}

docs

chart-elements.md

chart.md

geometry.md

index.md

interactions.md

scales.md

specialized-charts.md

tile.json