or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

annotations.mdchart-components.mdchart-container.mdg-components.mdg2-integration.mdgeometry-components.mdindex.mdmigration-guide.mdreact-hooks.mdstatistical-charts.mdtheme-system.mdutilities.md
tile.json

g2-integration.mddocs/

G2 Integration

BizCharts provides full access to the underlying @antv/g2 library through the G2 export, enabling advanced users to leverage the complete G2 API for custom visualizations and advanced chart manipulation.

Capabilities

G2 Library Access

Complete access to @antv/g2 library classes, utilities, and functions for advanced chart customization.

import { G2 } from "bizcharts";

/** Complete G2 library re-export */
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;
  /** Scale utilities */
  Scale: typeof import('@antv/g2').Scale;
  /** Coordinate system utilities */
  Coordinate: typeof import('@antv/g2').Coordinate;
  /** Interaction utilities */
  Interaction: typeof import('@antv/g2').Interaction;
  /** Animation utilities */
  Animation: typeof import('@antv/g2').Animation;
  /** Utility functions */
  Util: typeof import('@antv/g2').Util;
  /** Global configuration */
  Global: typeof import('@antv/g2').Global;
  /** Theme utilities */
  Theme: typeof import('@antv/g2').Theme;
  /** Shape utilities */
  Shape: typeof import('@antv/g2').Shape;
  /** Event system */
  Event: typeof import('@antv/g2').Event;
  /** Facet system */
  Facet: typeof import('@antv/g2').Facet;
  /** Guide/Annotation system */
  Guide: typeof import('@antv/g2').Guide;
  /** Component system */
  Component: typeof import('@antv/g2').Component;
  [key: string]: any;
};

Usage Examples:

import { G2 } from "bizcharts";

// Create a native G2 chart instance
const chart = new G2.Chart({
  container: 'container',
  width: 400,
  height: 300
});

// Use G2 utilities directly
const colorUtil = G2.Util.color;
const customColor = colorUtil.rgb2hex([255, 0, 0]);

// Access G2 global configuration
G2.Global.animate = false;

Direct G2 Chart Creation

Create and manipulate G2 charts directly for maximum control over visualization behavior.

/**
 * Create a native G2 chart with full API access
 */
function createG2Chart(config: {
  container: string | HTMLElement;
  width?: number;
  height?: number;
  autoFit?: boolean;
  padding?: number | number[];
  theme?: string | object;
  [key: string]: any;
}): import('@antv/g2').Chart;

Usage Examples:

import { G2 } from "bizcharts";

// Create G2 chart with advanced configuration
const chart = new G2.Chart({
  container: 'chart-container',
  width: 600,
  height: 400,
  autoFit: true,
  padding: [20, 40, 50, 40],
  theme: 'dark'
});

// Load data
chart.data(data);

// Create geometries using G2 API
chart.line()
  .position('x*y')
  .color('series')
  .shape('smooth');

// Advanced scale configuration
chart.scale('x', {
  type: 'time',
  tickCount: 10,
  range: [0, 1]
});

// Custom interaction
chart.interaction('active-region');

// Render
chart.render();

G2 View System

Access G2's view system for creating complex multi-chart layouts and coordinated visualizations.

/**
 * G2 View class for multi-chart layouts
 */
declare class G2View {
  constructor(config: {
    container?: string | HTMLElement;
    start?: [number, number];
    end?: [number, number];
    padding?: number | number[];
    [key: string]: any;
  });
  
  data(data: any[]): G2View;
  scale(field: string, config: object): G2View;
  coordinate(type: string, config?: object): G2View;
  axis(field: string, config: boolean | object): G2View;
  legend(field: string, config: boolean | object): G2View;
  tooltip(config: boolean | object): G2View;
  annotation(): any;
  interaction(type: string): G2View;
  render(): void;
  destroy(): void;
}

Usage Examples:

import { G2 } from "bizcharts";

// Create main chart
const chart = new G2.Chart({
  container: 'container',
  width: 800,
  height: 600
});

// Create views for different sections
const topView = chart.createView({
  start: [0, 0.6],
  end: [1, 1],
  padding: [20, 40, 0, 40]
});

const bottomView = chart.createView({
  start: [0, 0],
  end: [1, 0.4],
  padding: [0, 40, 40, 40]
});

// Configure each view independently
topView.data(timeSeriesData)
  .line()
  .position('date*value')
  .color('series');

bottomView.data(barData)
  .interval()
  .position('category*count')
  .color('category');

chart.render();

G2 Utility Functions

Access G2's utility library for data processing, color manipulation, and mathematical operations.

declare const G2Util: {
  /** Color utilities */
  color: {
    rgb2hex(rgb: [number, number, number]): string;
    hex2rgb(hex: string): [number, number, number];
    toRGB(color: string): string;
    modifyAlpha(color: string, alpha: number): string;
  };
  
  /** Mathematical utilities */
  math: {
    snapEqual(v1: number, v2: number, scale: number): boolean;  
    snapFloor(num: number, scale: number): number;
    snapMultiple(v: number, base: number, scale: number): number;
  };
  
  /** Data processing utilities */
  data: {
    getRange(values: number[]): [number, number];
    isInRange(value: number, range: [number, number]): boolean;
    normalizeValue(value: number, range: [number, number]): number;
  };
  
  /** DOM utilities */
  dom: {
    getWidth(el: HTMLElement): number;
    getHeight(el: HTMLElement): number;
    modifyCSS(el: HTMLElement, css: object): void;
  };
  [key: string]: any;
};

Advanced Customization

Use G2's shape, theme, and interaction systems for deep customization.

/**
 * Register custom shapes, themes, and interactions
 */
declare namespace G2Registration {
  /** Register custom geometry shape */
  function registerShape(
    geomType: string,
    shapeName: string,
    shapeConfig: object
  ): void;
  
  /** Register custom theme */
  function registerTheme(
    themeName: string,
    themeConfig: object
  ): void;
  
  /** Register custom interaction */
  function registerInteraction(
    interactionName: string,
    interactionConfig: object
  ): void;
}

Usage Examples:

import { G2 } from "bizcharts";

// Register custom shape
G2.registerShape('point', 'custom-star', {
  draw(cfg, container) {
    // Custom shape drawing logic
    return container.addShape('path', {
      attrs: {
        path: 'M0,0 L10,0 L15,10 L5,15 Z',
        fill: cfg.color,
        stroke: cfg.color
      }
    });
  }
});

// Register custom theme
G2.registerTheme('custom-corporate', {
  colors10: ['#1f77b4', '#ff7f0e', '#2ca02c'],
  backgroundColor: '#fafafa',
  plotBackgroundColor: '#ffffff',
  fontFamily: 'Arial, sans-serif'
});

// Use custom registrations
const chart = new G2.Chart({
  container: 'container',
  theme: 'custom-corporate'
});

chart.point()
  .position('x*y')
  .shape('custom-star');

Integration Patterns

Mixed BizCharts and G2 Usage

Combine BizCharts React components with direct G2 manipulation for maximum flexibility.

import React, { useRef, useEffect } from 'react';
import { Chart, Line, useChartInstance } from 'bizcharts';
import { G2 } from 'bizcharts';

function HybridChart({ data }) {
  const chartRef = useRef();
  const chart = useChartInstance();
  
  useEffect(() => {
    if (chart) {
      // Use G2 API directly on BizCharts instance
      chart.interaction('brush');
      
      // Add custom annotation using G2
      chart.annotation().text({
        position: ['50%', '10%'],
        content: 'Custom G2 Annotation',
        style: {
          fontSize: 14,
          fill: '#666'
        }
      });
      
      chart.render();
    }
  }, [chart]);
  
  return (
    <Chart height={400} data={data} ref={chartRef}>
      <Line position="x*y" />
    </Chart>
  );
}

Performance Optimization with G2

Use G2's advanced features for performance optimization in large datasets.

import { G2 } from "bizcharts";

// Enable G2 performance optimizations
G2.Global.animate = false; // Disable animations for performance
G2.Global.widthRatio = 1;  // Adjust rendering precision

// Use G2's data sampling for large datasets
const chart = new G2.Chart({ container: 'container' });
chart.data(largeDataset);

// Enable geometry sampling
chart.line()
  .position('x*y')
  .size(1) // Thinner lines for performance
  .animate(false); // Disable animations

// Use G2's built-in data sampling
chart.scale('x', {
  type: 'time',
  mask: 'MM-DD', // Simplified labels
  tickCount: 5   // Fewer ticks
});