or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

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

Statistical Charts

Statistical charts are pre-built, high-level chart components that encapsulate common visualization patterns. Built on top of @antv/g2plot, they provide ready-to-use solutions for standard data visualization needs while maintaining the flexibility of the underlying grammar of graphics.

Capabilities

Base Plot Options

All statistical chart components share common configuration options for enhanced functionality.

/**
 * Base configuration options shared by all statistical chart components
 */
interface BasePlotOptions {
  /** Get G2Plot instance callback */
  onGetG2Instance?: (chart: any) => void;
  /** Custom error content */
  errorContent?: React.ReactNode;
  /** Chart event handlers */
  events?: Record<string, Function>;
  /** Chart title */
  title?: React.ReactNode | VisibleText;
  /** Chart description */
  description?: React.ReactNode | VisibleText;
  /** Force fit to container (legacy, use autoFit) */
  forceFit?: boolean;
  /** Material component flag for low-code engines */
  isMaterial?: boolean;
}

interface VisibleText {
  visible?: boolean;
  text: string;
}

Line Charts

Time series and continuous data visualization components.

/**
 * Basic line chart for time series and continuous data
 */
declare const LineChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField?: string;
  smooth?: boolean;
  connectNulls?: boolean;
  lineStyle?: object | ((datum: any) => object);
  point?: {
    size?: number;
    shape?: string;
    style?: object;
  };
  meta?: Record<string, any>;
  [key: string]: any;
}>;

/**
 * Step line chart for stepwise data changes
 */
declare const StepLineChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  stepType?: 'vh' | 'hv' | 'hvh' | 'vhv';
  [key: string]: any;
}>;

Usage Examples:

import React from "react";
import { LineChart, StepLineChart } from "bizcharts";

// Basic line chart
function BasicLineChart() {
  const data = [
    { month: "Jan", value: 3.9 },
    { month: "Feb", value: 4.2 },
    { month: "Mar", value: 5.7 }
  ];

  return (
    <LineChart
      data={data}
      xField="month"
      yField="value"
      height={400}
      smooth
      point={{ size: 5, shape: 'diamond' }}
    />
  );
}

// Multi-series line chart
function MultiSeriesLineChart() {
  return (
    <LineChart
      data={data}
      xField="date"
      yField="value"
      seriesField="category"
      height={400}
      lineStyle={{ lineWidth: 2 }}
    />
  );
}

// Step line chart
function StepChart() {
  return (
    <StepLineChart
      data={data}
      xField="x"
      yField="y"
      stepType="vh"
      height={400}
    />
  );
}

Area Charts

Filled area visualizations for magnitude representation.

/**
 * Basic area chart for magnitude visualization
 */
declare const AreaChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField?: string;
  smooth?: boolean;
  areaStyle?: object | ((datum: any) => object);
  [key: string]: any;
}>;

/**
 * Stacked area chart for part-to-whole relationships
 */
declare const StackedAreaChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField: string;
  [key: string]: any;
}>;

/**
 * Percent stacked area chart for proportional analysis
 */
declare const PercentStackedAreaChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField: string;
  [key: string]: any;
}>;

Column and Bar Charts

Categorical data comparison components.

/**
 * Column chart for vertical categorical comparisons
 */
declare const ColumnChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField?: string;
  columnStyle?: object | ((datum: any) => object);
  columnWidthRatio?: number;
  [key: string]: any;
}>;

/**
 * Bar chart for horizontal categorical comparisons
 */
declare const BarChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField?: string;
  [key: string]: any;
}>;

/**
 * Grouped column chart for multi-category comparisons
 */
declare const GroupedColumnChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField: string;
  [key: string]: any;
}>;

/**
 * Stacked column chart for part-to-whole analysis
 */
declare const StackedColumnChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField: string;
  [key: string]: any;
}>;

/**
 * Range column chart for range data visualization
 */
declare const RangeColumnChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: [string, string];
  [key: string]: any;
}>;

// Similar interfaces for bar chart variants
declare const StackedBarChart: React.FC<any>;
declare const GroupedBarChart: React.FC<any>;
declare const PercentStackedBarChart: React.FC<any>;
declare const RangeBarChart: React.FC<any>;
declare const PercentStackedColumnChart: React.FC<any>;

Usage Examples:

// Basic column chart
function BasicColumnChart() {
  return (
    <ColumnChart
      data={data}
      xField="category"
      yField="value"
      height={400}
      columnStyle={{ fill: '#1890ff' }}
    />
  );
}

// Grouped column chart
function GroupedColumns() {
  return (
    <GroupedColumnChart
      data={data}
      xField="month"
      yField="value"
      seriesField="type"
      height={400}
    />
  );
}

Pie and Donut Charts

Part-to-whole relationship visualizations.

/**
 * Pie chart for part-to-whole relationships
 */
declare const PieChart: React.FC<BasePlotOptions & {
  data: any[];
  angleField: string;
  colorField: string;
  radius?: number;
  innerRadius?: number;
  pieStyle?: object | ((datum: any) => object);
  label?: {
    visible?: boolean;
    type?: 'inner' | 'outer' | 'spider';
    content?: string;
    formatter?: (datum: any, mappingData: any, index: number) => string;
  };
  [key: string]: any;
}>;

/**
 * Donut chart for part-to-whole with central space
 */
declare const DonutChart: React.FC<BasePlotOptions & {
  data: any[];
  angleField: string;
  colorField: string;
  innerRadius?: number;
  radius?: number;
  statistic?: {
    title?: {
      style?: object;
      content?: string;
      formatter?: Function;
    };
    content?: {
      style?: object;
      content?: string;
      formatter?: Function;
    };
  };
  [key: string]: any;
}>;

Usage Examples:

// Basic pie chart
function BasicPieChart() {
  return (
    <PieChart
      data={data}
      angleField="value"
      colorField="category"
      radius={0.8}
      height={400}
      label={{
        type: 'outer',
        content: '{name} {percentage}'
      }}
    />
  );
}

// Donut chart with statistics
function DonutWithStats() {
  return (
    <DonutChart
      data={data}
      angleField="value"
      colorField="type"
      innerRadius={0.6}
      height={400}
      statistic={{
        title: {
          content: 'Total'
        },
        content: {
          content: '1,234'
        }
      }}
    />
  );
}

Scatter and Bubble Charts

Correlation and multi-dimensional data visualization.

/**
 * Scatter chart for correlation analysis
 */
declare const ScatterChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  colorField?: string;
  shapeField?: string;
  sizeField?: string;
  size?: [number, number] | number;
  pointStyle?: object | ((datum: any) => object);
  [key: string]: any;
}>;

/**
 * Bubble chart for three-dimensional data visualization
 */
declare const BubbleChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  sizeField: string;
  colorField?: string;
  size?: [number, number];
  [key: string]: any;
}>;

Specialized Charts

Advanced and domain-specific visualization components.

/**
 * Radar chart for multi-dimensional comparison
 */
declare const RadarChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  seriesField?: string;
  area?: {
    visible?: boolean;
    style?: object;
  };
  point?: {
    visible?: boolean;
    size?: number;
    style?: object;
  };
  [key: string]: any;
}>;

/**
 * Heatmap chart for matrix data visualization
 */
declare const HeatmapChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  colorField: string;
  sizeField?: string;
  shapeSize?: [number, number];
  [key: string]: any;
}>;

/**
 * Treemap chart for hierarchical data
 */
declare const TreemapChart: React.FC<BasePlotOptions & {
  data: any;
  colorField: string;
  [key: string]: any;
}>;

/**
 * Funnel chart for process flow visualization
 */
declare const FunnelChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  [key: string]: any;
}>;

/**
 * Gauge chart for single metric visualization
 */
declare const GaugeChart: React.FC<BasePlotOptions & {
  percent: number;
  range?: {
    ticks?: number[];
    color?: string[];
  };
  indicator?: {
    pointer?: {
      style?: object;
    };
    pin?: {
      style?: object;
    };
  };
  [key: string]: any;
}>;

/**
 * Liquid chart for percentage/progress visualization
 */
declare const LiquidChart: React.FC<BasePlotOptions & {
  percent: number;
  shape?: string;
  outline?: {
    border?: number;
    distance?: number;
    style?: object;
  };
  wave?: {
    length?: number;
    count?: number;
  };
  [key: string]: any;
}>;

/**
 * Word cloud chart for text frequency visualization
 */
declare const WordCloudChart: React.FC<BasePlotOptions & {
  data: any[];
  wordField: string;
  weightField: string;
  colorField?: string;
  wordStyle?: {
    fontFamily?: string;
    fontWeight?: string | number;
    padding?: number;
    fontSize?: [number, number];
    rotation?: [number, number];
  };
  [key: string]: any;
}>;

/**
 * Calendar chart for time-based data patterns
 */
declare const CalendarChart: React.FC<BasePlotOptions & {
  data: any[];
  dateField: string;
  valueField: string;
  [key: string]: any;
}>;

/**
 * Waterfall chart for cumulative effect visualization
 */
declare const WaterfallChart: React.FC<BasePlotOptions & {
  data: any[];
  xField: string;
  yField: string;
  [key: string]: any;
}>;

/**
 * Bullet chart for performance comparison
 */
declare const BulletChart: React.FC<BasePlotOptions & {
  data: any[];
  measureField: string;
  rangeField: string;
  targetField: string;
  xField: string;
  [key: string]: any;
}>;

/**
 * Dual axes chart for comparing two metrics with different scales
 */
declare const DualAxesChart: React.FC<BasePlotOptions & {
  data: [any[], any[]];
  xField: string;
  yField: [string, string];
  geometryOptions?: [object, object];
  [key: string]: any;
}>;

// Additional specialized charts
declare const RoseChart: React.FC<any>;
declare const StackedRoseChart: React.FC<any>;
declare const GroupedRoseChart: React.FC<any>;
declare const HistogramChart: React.FC<any>;
declare const DensityHeatmapChart: React.FC<any>;

Usage Examples:

// Radar chart
function RadarAnalysis() {
  return (
    <RadarChart
      data={data}
      xField="skill"
      yField="score"
      seriesField="person"
      height={400}
      area={{ visible: true }}
      point={{ visible: true, size: 3 }}
    />
  );
}

// Gauge chart
function PerformanceGauge() {
  return (
    <GaugeChart
      percent={0.75}
      height={400}
      range={{
        ticks: [0, 0.25, 0.5, 0.75, 1],
        color: ['#30BF78', '#FAAD14', '#F4664A']
      }}
    />
  );
}

// Heatmap
function CorrelationHeatmap() {
  return (
    <HeatmapChart
      data={data}
      xField="hour"
      yField="day"
      colorField="value"
      height={400}
    />
  );
}

Sparkline Charts

Compact visualization components for dashboards and inline usage.

/**
 * Progress chart for simple percentage display
 */
declare const ProgressChart: React.FC<BasePlotOptions & {
  percent: number;
  color?: string[];
  strokeWidth?: number;
  [key: string]: any;
}>;

/**
 * Ring progress chart for donut-style progress
 */
declare const RingProgressChart: React.FC<BasePlotOptions & {
  percent: number;
  color?: string[];
  innerRadius?: number;
  [key: string]: any;
}>;

/**
 * Tiny column chart for compact column visualization
 */
declare const TinyColumnChart: React.FC<BasePlotOptions & {
  data: any[];
  columnWidthRatio?: number;
  [key: string]: any;
}>;

/**
 * Tiny area chart for compact area visualization
 */
declare const TinyAreaChart: React.FC<BasePlotOptions & {
  data: any[];
  smooth?: boolean;
  [key: string]: any;
}>;

/**
 * Tiny line chart for compact line visualization
 */
declare const TinyLineChart: React.FC<BasePlotOptions & {
  data: any[];
  smooth?: boolean;
  [key: string]: any;
}>;

Usage Examples:

// Sparkline dashboard
function SparklineDashboard() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <div>
        <h4>Sales Trend</h4>
        <TinyLineChart data={salesData} height={60} smooth />
      </div>
      <div>
        <h4>Performance</h4>
        <RingProgressChart percent={0.82} height={60} />
      </div>
      <div>
        <h4>Daily Metrics</h4>
        <TinyColumnChart data={dailyData} height={60} />
      </div>
    </div>
  );
}

Types

// Common data types
interface ChartData {
  [key: string]: any;
}

// Style configuration types
interface StyleConfig {
  fill?: string;
  stroke?: string;
  lineWidth?: number;
  lineDash?: number[];
  opacity?: number;
  [key: string]: any;
}

// Label configuration
interface LabelConfig {
  visible?: boolean;
  type?: string;
  content?: string | string[];
  style?: StyleConfig;
  formatter?: (datum: any, mappingData?: any, index?: number) => string;
  position?: string;
  offset?: number;
  rotate?: number;
}

// Legend configuration
interface LegendConfig {
  visible?: boolean;
  position?: string;
  layout?: 'horizontal' | 'vertical';
  title?: {
    visible?: boolean;
    text?: string;
    style?: StyleConfig;
  };
  marker?: {
    symbol?: string;
    style?: StyleConfig;
  };
  itemName?: {
    style?: StyleConfig;
    formatter?: Function;
  };
}

// Axis configuration
interface AxisConfig {
  visible?: boolean;
  position?: string;
  title?: {
    visible?: boolean;
    text?: string;
    style?: StyleConfig;
  };
  label?: {
    visible?: boolean;
    style?: StyleConfig;
    formatter?: Function;
    rotate?: number;
  };
  line?: {
    visible?: boolean;
    style?: StyleConfig;
  };
  tickLine?: {
    visible?: boolean;
    style?: StyleConfig;
  };
  grid?: {
    visible?: boolean;
    style?: StyleConfig;
  };
}

Version

Tile

Files