CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-bizcharts

A powerful React charting and data visualization library built on top of @antv/g2, providing easy-to-use React components for creating interactive charts and visualizations with TypeScript support

—

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/

BizCharts

BizCharts is a comprehensive React-based data visualization library built on top of @antv/g2. It provides declarative React components for creating interactive charts and visualizations with TypeScript support, featuring a powerful grammar of graphics approach to data visualization.

Package Information

  • Package Name: bizcharts
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install bizcharts

Core Imports

import { Chart, Line, Area, Interval, Point } from "bizcharts";

For CommonJS:

const { Chart, Line, Area, Interval, Point } = require("bizcharts");

Basic Usage

import React from "react";
import { Chart, Line, Point, Tooltip, Legend } from "bizcharts";

const data = [
  { month: "Jan", value: 3.9 },
  { month: "Feb", value: 4.2 },
  { month: "Mar", value: 5.7 },
  { month: "Apr", value: 8.5 },
  { month: "May", value: 11.9 }
];

function BasicChart() {
  return (
    <Chart height={400} data={data} autoFit>
      <Line position="month*value" />
      <Point position="month*value" />
      <Tooltip shared />
      <Legend />
    </Chart>
  );
}

Architecture

BizCharts is built around several key architectural concepts:

  • Grammar of Graphics: Based on @antv/g2's implementation of Leland Wilkinson's Grammar of Graphics
  • React Integration: Full React component system with hooks and context providers
  • Component Composition: Chart elements are composed from individual React components
  • TypeScript Support: Complete type definitions for enhanced development experience
  • Theme System: Comprehensive theming with light/dark mode support
  • Plot Integration: Built-in statistical chart components via @antv/g2plot integration

Capabilities

Chart Container

Core chart container component that provides the foundation for all BizCharts visualizations. Handles canvas rendering, data management, and coordinate systems.

interface IChartProps extends IViewProps {
  /** Chart container DOM element or ID */
  container?: HTMLElement;
  /** Chart width */
  width?: number;
  /** Chart height */
  height?: number;
  /** Auto-fit to container size */
  autoFit?: boolean;
  /** Device pixel ratio */
  pixelRatio?: number;
  /** Chart padding */
  padding?: ViewPadding;
  /** Chart theme */
  theme?: object | string;
  /** Chart data */
  data?: any[];
  /** Chart visibility */
  visible?: boolean;
  /** Default interactions */
  defaultInteractions?: string[];
}

declare const Chart: React.FC<IChartProps>;

Chart Container

Geometry Components

Essential geometry components for creating different types of data visualizations including lines, areas, bars, points, and more complex geometries.

interface IBaseGemoProps {
  /** Data position mapping */
  position?: string;
  /** Color mapping */
  color?: string | ColorAttrCallback;
  /** Shape mapping */
  shape?: string | ShapeAttrCallback;
  /** Size mapping */
  size?: number | string | SizeAttrCallback;
  /** Opacity mapping */
  opacity?: number | string;
  /** Style configuration */
  style?: StyleOption | StyleCallback;
  /** Tooltip configuration */
  tooltip?: boolean | string | GeometryTooltipOption | TooltipCallback;
  /** Label configuration */
  label?: boolean | string | LabelOption | GeometryLabelCfg | LabelCallback;
  /** Animation configuration */
  animate?: boolean | AnimateOption;
  /** Data adjustment */
  adjust?: string | string[] | AdjustOption | AdjustOption[];
}

declare const Line: React.FC<IBaseGemoProps>;
declare const Area: React.FC<IBaseGemoProps>;
declare const Interval: React.FC<IBaseGemoProps>;
declare const Point: React.FC<IBaseGemoProps>;
declare const Polygon: React.FC<IBaseGemoProps>;
declare const Schema: React.FC<IBaseGemoProps>;
declare const Edge: React.FC<IBaseGemoProps>;
declare const Heatmap: React.FC<IBaseGemoProps>;
declare const Path: React.FC<IBaseGemoProps>;
declare const BaseGeom: React.FC<IBaseGeomProps>;
declare const LineAdvance: React.FC<IBaseGemoProps>;

Geometry Components

Chart Components

Chart configuration components for axes, legends, tooltips, coordinate systems, and other chart elements that enhance data visualization.

interface IAxisProps {
  /** Axis name/field */
  name?: string;
  /** Axis visibility */
  visible?: boolean;
  /** Axis position */
  position?: string;
  /** Axis title */
  title?: boolean | object;
  /** Axis line */
  line?: boolean | object;
  /** Axis tick marks */
  tickLine?: boolean | object;
  /** Axis labels */
  label?: boolean | object;
  /** Axis grid */
  grid?: boolean | object;
}

declare const Axis: React.FC<IAxisProps>;
declare const Legend: React.FC<ILegendProps>;
declare const Tooltip: React.FC<ITooltipProps>;
declare const Coordinate: React.FC<ICoordinateProps>;
declare const Facet: React.FC<IFacetProps>;
declare const Slider: React.FC<ISliderProps>;

Chart Components

Annotation Components

Annotation system for adding supplementary information to charts including text, lines, regions, images, and interactive markers.

declare namespace Annotation {
  const Arc: React.FC<any>;
  const DataMarker: React.FC<any>;
  const DataRegion: React.FC<any>;
  const Html: React.FC<any>;
  const Image: React.FC<any>;
  const Line: React.FC<any>;
  const Region: React.FC<any>;
  const Text: React.FC<any>;
  const RegionFilter: React.FC<any>;
}

Annotations

Statistical Charts

Pre-built statistical chart components covering common visualization patterns including line charts, bar charts, pie charts, and specialized charts.

// Line charts
declare const LineChart: React.FC<IPlotProps>;
declare const StepLineChart: React.FC<IPlotProps>;

// Area charts  
declare const AreaChart: React.FC<IPlotProps>;
declare const StackedAreaChart: React.FC<IPlotProps>;
declare const PercentStackedAreaChart: React.FC<IPlotProps>;

// Column charts
declare const ColumnChart: React.FC<IPlotProps>;
declare const GroupedColumnChart: React.FC<IPlotProps>;
declare const StackedColumnChart: React.FC<IPlotProps>;
declare const RangeColumnChart: React.FC<IPlotProps>;
declare const PercentStackedColumnChart: React.FC<IPlotProps>;

// Bar charts
declare const BarChart: React.FC<IPlotProps>;
declare const StackedBarChart: React.FC<IPlotProps>;
declare const GroupedBarChart: React.FC<IPlotProps>;
declare const PercentStackedBarChart: React.FC<IPlotProps>;
declare const RangeBarChart: React.FC<IPlotProps>;

// Pie and donut charts
declare const PieChart: React.FC<IPlotProps>;
declare const DonutChart: React.FC<IPlotProps>;

// Rose charts
declare const RoseChart: React.FC<IPlotProps>;
declare const StackedRoseChart: React.FC<IPlotProps>;
declare const GroupedRoseChart: React.FC<IPlotProps>;

// Scatter and bubble charts
declare const ScatterChart: React.FC<IPlotProps>;
declare const BubbleChart: React.FC<IPlotProps>;

// Heatmap charts
declare const HeatmapChart: React.FC<IPlotProps>;
declare const DensityHeatmapChart: React.FC<IPlotProps>;

// Specialized charts
declare const RadarChart: React.FC<IPlotProps>;
declare const FunnelChart: React.FC<IPlotProps>;
declare const GaugeChart: React.FC<IPlotProps>;
declare const WordCloudChart: React.FC<IPlotProps>;
declare const TreemapChart: React.FC<IPlotProps>;
declare const LiquidChart: React.FC<IPlotProps>;
declare const BulletChart: React.FC<IPlotProps>;
declare const CalendarChart: React.FC<IPlotProps>;
declare const WaterfallChart: React.FC<IPlotProps>;
declare const HistogramChart: React.FC<IPlotProps>;
declare const DualAxesChart: React.FC<IPlotProps>;

// Sparkline charts
declare const ProgressChart: React.FC<IPlotProps>;
declare const RingProgressChart: React.FC<IPlotProps>;
declare const TinyColumnChart: React.FC<IPlotProps>;
declare const TinyAreaChart: React.FC<IPlotProps>;
declare const TinyLineChart: React.FC<IPlotProps>;

Statistical Charts

React Hooks

React hooks for accessing chart instances, views, and theme management within BizCharts components.

/** Get current chart instance from context */
function useChartInstance(): Chart;

/** Legacy alias for useChartInstance */
function useRootChart(): Chart;

/** Get current chart view from context */
function useView(): View;

/** Theme management hook */
function useTheme(defaultThemeName?: string): [object, (themeName: string) => void];

React Hooks

Utilities

Utility functions for data transformation, configuration helpers, and integration with the underlying G2 visualization grammar.

declare const Util: {
  // Data transformation utilities
  fold: Function;
  percentage: Function;
  minifyNum: Function;
  splitBySeparator: Function;
  
  // Configuration helpers
  visibleHelper: Function;
  
  // Function utilities
  cloneDeep: Function;
  shallowEqual: Function;
  
  // @antv/util functions
  [key: string]: any;
};

/** Create plot component factory */
function createPlot<IPlotConfig>(
  PlotClass: any,
  name: string,
  transCfg?: Function
): React.ForwardRefExoticComponent<IPlotConfig>;

/** Create tooltip connector utility */
function createTooltipConnector(): any;

// Core system utilities
/** Register custom scale type */
function registerScale(type: string, ScaleClass: any): void;

/** Get registered scale class */
function getScale(type: string): any;

/** Register tick calculation method */
function registerTickMethod(method: string, tickMethod: Function): void;

/** Set global G2Plot configuration */
function setGlobal(config: object): void;

/** Global configuration object */
declare const GLOBAL: object;

/** BizCharts version string */
declare const VERSION: string;

/** Set default error fallback component */
function setDefaultErrorFallback(component: React.ComponentType): void;

Utilities

G2 Integration

Direct access to the complete @antv/g2 library for advanced chart customization, native G2 chart creation, and low-level visualization control.

declare const G2: {
  /** Core chart class */
  Chart: typeof import('@antv/g2').Chart;
  /** View class for multi-chart layouts */
  View: typeof import('@antv/g2').View;
  /** Geometry base class */
  Geometry: typeof import('@antv/g2').Geometry;
  /** Utility functions */
  Util: typeof import('@antv/g2').Util;
  /** Global configuration */
  Global: typeof import('@antv/g2').Global;
  /** Theme utilities */
  Theme: typeof import('@antv/g2').Theme;
  [key: string]: any;
};

/** Create native G2 chart instance */
function createG2Chart(config: object): import('@antv/g2').Chart;

G2 Integration

G Components

Low-level G rendering components for custom shape creation, direct canvas manipulation, and advanced rendering control.

declare const GComponents: {
  /** Canvas container component */
  Canvas: React.FC<CanvasProps>;
  /** Group container for organizing elements */
  Group: React.FC<GroupProps>;
  /** Circle shape component */
  Circle: React.FC<CircleProps>;
  /** Rectangle shape component */
  Rect: React.FC<RectProps>;
  /** Text rendering component */
  Text: React.FC<TextProps>;
  /** Line shape component */
  Line: React.FC<LineProps>;
  /** Path component for complex shapes */
  Path: React.FC<PathProps>;
  /** ReactG render function */
  render: (element: React.ReactElement, container: HTMLElement) => void;
  [key: string]: React.FC<any>;
};

G Components

Theme System

Comprehensive theming system supporting light/dark modes and custom theme creation with @antv/g2 integration.

/** Create theme from style sheet */
function createThemeByStyleSheet(styleSheet: object): object;

/** Built-in light theme style sheet */
declare const antvLight: object;

/** Built-in dark theme style sheet */
declare const antvDark: object;

/** Registered theme names */
type ThemeName = 'default' | 'light' | 'dark';

Theme System

Legacy Components

Backward compatibility components for migration from older BizCharts versions and pure G2 usage.

/** Legacy Guide component (deprecated - use Annotation instead) */
declare const Guide: {
  Arc: React.FC<any>;
  DataMarker: React.FC<any>;
  DataRegion: React.FC<any>;
  Html: React.FC<any>;
  Image: React.FC<any>;
  Line: React.FC<any>;
  Region: React.FC<any>;
  Text: React.FC<any>;
  RegionFilter: React.FC<any>;
};

/** Legacy Coord component (deprecated - use Coordinate instead) */
declare const Coord: React.FC<any>;

/** Legacy hook (deprecated - use useChartInstance instead) */
function useRootChart(): Chart;

Migration Guide

Types

// Core interfaces
interface IEvent {
  target?: any;
  view?: View;
  gEvent?: any;
  event?: any;
  x?: number;
  y?: number;
  clientX?: number;
  clientY?: number;
  type?: string;
  [key: string]: any;
}

interface IChartProps extends IViewProps {
  forceUpdate?: boolean;
  container?: HTMLElement;
  width?: number;
  height?: number;
  autoFit?: boolean;
  pixelRatio?: number;
  padding?: ViewPadding;
  localRefresh?: boolean;
  visible?: boolean;
  defaultInteractions?: string[];
  limitInPlot?: boolean;
  theme?: object | string;
  pure?: boolean;
}

interface IViewProps {
  data?: any[];
  filter?: any;
  children?: React.ReactNode;
}

interface IBaseGemoProps {
  position?: string;
  color?: string | ColorAttrCallback;
  shape?: string | ShapeAttrCallback;
  size?: number | string | SizeAttrCallback;
  opacity?: number | string;
  style?: StyleOption | StyleCallback;
  tooltip?: boolean | string | GeometryTooltipOption | TooltipCallback;
  label?: boolean | string | LabelOption | GeometryLabelCfg | LabelCallback;
  animate?: boolean | AnimateOption;
  adjust?: string | string[] | AdjustOption | AdjustOption[];
}

// Chart component interfaces
interface ILegendProps {
  /** Legend position */
  position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  /** Legend visibility */
  visible?: boolean;
  /** Legend title */
  title?: boolean | object;
  /** Legend marker configuration */
  marker?: object;
  /** Legend text configuration */
  text?: object;
  /** Legend item spacing */
  itemSpacing?: number;
  /** Legend layout */
  layout?: 'horizontal' | 'vertical';
  /** Legend offset */
  offsetX?: number;
  offsetY?: number;
  /** Legend background */
  background?: object;
  /** Custom legend items */
  custom?: boolean;
  /** Legend items */
  items?: any[];
}

interface ITooltipProps {
  /** Tooltip visibility */
  visible?: boolean;
  /** Tooltip trigger type */
  trigger?: 'hover' | 'click' | 'none';
  /** Show markers in tooltip */
  showMarkers?: boolean;
  /** Show crosshairs */
  showCrosshairs?: boolean;
  /** Show tooltip title */
  showTitle?: boolean;
  /** Show tooltip content */
  showContent?: boolean;
  /** Tooltip position */
  position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
  /** Tooltip follow cursor */
  follow?: boolean;
  /** Tooltip entry sorter */
  entryProcessor?: (originalItems: any[]) => any[];
  /** Tooltip item formatter */
  itemTpl?: string;
  /** Tooltip container style */
  containerTpl?: string;
  /** Tooltip offset */
  offset?: number;
  /** Crosshairs configuration */
  crosshairs?: object;
  /** Shared tooltip */
  shared?: boolean;
}

interface ICoordinateProps {
  /** Coordinate type */
  type?: 'rect' | 'polar' | 'theta' | 'helix';
  /** Coordinate rotation */
  rotate?: number;
  /** Coordinate scale */
  scale?: [number, number];
  /** Coordinate translation */
  translate?: [number, number];
  /** Coordinate reflection */
  reflect?: 'x' | 'y';
  /** Coordinate transpose */
  transpose?: boolean;
  /** Coordinate start angle (for polar) */
  startAngle?: number;
  /** Coordinate end angle (for polar) */
  endAngle?: number;
  /** Coordinate radius (for polar) */
  radius?: number;
  /** Coordinate inner radius (for polar) */
  innerRadius?: number;
}

interface IFacetProps {
  /** Facet type */
  type?: 'rect' | 'mirror' | 'list' | 'matrix' | 'circle' | 'tree';
  /** Facet fields */
  fields?: string[];
  /** Show title */
  showTitle?: boolean;
  /** Facet spacing */
  spacing?: number | [number, number];
  /** Facet padding */
  padding?: number | [number, number, number, number];
  /** Column count */
  cols?: number;
  /** Row count */
  rows?: number;
  /** Each callback for rendering individual facets */
  eachView?: (view: any, facet: any) => void;
}

interface ISliderProps {
  /** Slider position */
  position?: 'top' | 'bottom';
  /** Slider height */
  height?: number;
  /** Slider width */
  width?: number;
  /** X axis field */
  xAxis?: string;
  /** Y axis field */
  yAxis?: string;
  /** Slider data */
  data?: any[];
  /** Slider start position */
  start?: number;
  /** Slider end position */
  end?: number;
  /** Min text */
  minText?: string;
  /** Max text */
  maxText?: string;
  /** Slider configuration */
  config?: object;
}

interface IBaseGeomProps extends IBaseGemoProps {
  /** Geometry type */
  type?: 'point' | 'line' | 'area' | 'interval' | 'polygon' | 'schema' | 'edge' | 'heatmap' | 'path';
  /** Custom geometry configuration */
  cfg?: object;
  /** Geometry creation callback */
  onCreate?: (geom: any) => void;
}

// Statistical chart interfaces
interface IPlotProps {
  /** Chart data */
  data: any[];
  /** Chart width */
  width?: number;
  /** Chart height */
  height?: number;
  /** Auto fit to container */
  autoFit?: boolean;
  /** Chart padding */
  padding?: number | [number, number, number, number] | 'auto';
  /** Chart theme */
  theme?: string | object;
  /** X axis field */
  xField?: string;
  /** Y axis field */
  yField?: string;
  /** Series field for grouping */
  seriesField?: string;
  /** Color field */
  colorField?: string;
  /** Size field */
  sizeField?: string;
  /** Color mapping */
  color?: string | string[] | Function;
  /** X axis configuration */
  xAxis?: boolean | object;
  /** Y axis configuration */
  yAxis?: boolean | object;
  /** Legend configuration */ 
  legend?: boolean | object;
  /** Tooltip configuration */
  tooltip?: boolean | object;
  /** Label configuration */
  label?: boolean | object;
  /** Interaction configuration */
  interactions?: object[];
  /** Animation configuration */
  animation?: boolean | object;
  /** Chart state */
  state?: object;
  /** Meta configuration for fields */
  meta?: Record<string, object>;
  /** Responsive configuration */
  responsive?: boolean;
  
  // Event handlers
  onReady?: (chart: any) => void;
  onEvent?: (chart: any, event: any) => void;
  
  // Chart-specific configurations (varies by chart type)
  [key: string]: any;
}

// Type aliases
type FieldString = string;
type ColorString = string;
type ShapeString = string;
type SizeRange = [number, number];
type EventFunc = (event: IEvent) => void;

docs

annotations.md

chart-components.md

chart-container.md

g-components.md

g2-integration.md

geometry-components.md

index.md

migration-guide.md

react-hooks.md

statistical-charts.md

theme-system.md

utilities.md

tile.json