Geometry components are the core visual elements in BizCharts that render data as different types of marks (points, lines, areas, bars, etc.). Each geometry type provides specific visualization patterns optimized for different data types and analysis needs.
All geometry components share a common set of properties for data mapping, styling, and interaction.
/**
* Base properties shared by all geometry components
*/
interface IBaseGemoProps {
/** Data position mapping (e.g., "x*y", "category*value") */
position?: string;
/** Color mapping or constant color */
color?: string | string[] | ColorAttrCallback;
/** Shape mapping or constant shape */
shape?: string | string[] | ShapeAttrCallback;
/** Size mapping or constant size */
size?: number | string | SizeRange | SizeAttrCallback;
/** Opacity mapping or constant opacity */
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 (stack, dodge, jitter, symmetric) */
adjust?: string | string[] | AdjustOption | AdjustOption[];
/** State configuration */
state?: StateOption;
/** Selection configuration */
select?: boolean | SelectOption;
/** Active state configuration */
active?: boolean;
/** Inactive state configuration */
inactive?: boolean;
}Creates line marks connecting data points, ideal for time series and continuous data visualization.
/**
* Line geometry for connecting data points with lines
*/
declare const Line: React.FC<IBaseGemoProps>;Usage Examples:
import React from "react";
import { Chart, Line, Tooltip } 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 (
<Chart height={400} data={data} autoFit>
<Line position="month*value" />
<Tooltip shared />
</Chart>
);
}
// Multi-line chart with colors
function MultiLineChart() {
return (
<Chart height={400} data={data} autoFit>
<Line
position="month*value"
color="category"
shape="smooth"
size={2}
/>
</Chart>
);
}
// Styled line with custom shape
function StyledLineChart() {
return (
<Chart height={400} data={data} autoFit>
<Line
position="x*y"
shape="hv"
style={{
stroke: "#1890ff",
lineWidth: 3,
lineDash: [5, 5]
}}
/>
</Chart>
);
}Creates filled area marks, perfect for showing magnitude and changes over time.
/**
* Area geometry for filled area visualizations
*/
declare const Area: React.FC<IBaseGemoProps>;Usage Examples:
// Basic area chart
function BasicAreaChart() {
return (
<Chart height={400} data={data} autoFit>
<Area position="month*value" />
</Chart>
);
}
// Stacked area chart
function StackedAreaChart() {
return (
<Chart height={400} data={data} autoFit>
<Area
position="month*value"
color="category"
adjust="stack"
/>
</Chart>
);
}Creates rectangular marks (bars/columns), ideal for categorical data and comparisons.
/**
* Interval geometry for bar and column charts
*/
declare const Interval: React.FC<IBaseGemoProps>;Usage Examples:
// Column chart
function ColumnChart() {
return (
<Chart height={400} data={data} autoFit>
<Interval position="category*value" />
</Chart>
);
}
// Grouped bar chart
function GroupedBarChart() {
return (
<Chart height={400} data={data} autoFit>
<Interval
position="category*value"
color="series"
adjust="dodge"
/>
</Chart>
);
}
// Stacked column chart
function StackedColumnChart() {
return (
<Chart height={400} data={data} autoFit>
<Interval
position="category*value"
color="series"
adjust="stack"
/>
</Chart>
);
}Creates point marks for scatter plots and dot charts.
/**
* Point geometry for scatter plots and dot visualizations
*/
declare const Point: React.FC<IBaseGemoProps>;Usage Examples:
// Scatter plot
function ScatterPlot() {
return (
<Chart height={400} data={data} autoFit>
<Point
position="x*y"
color="category"
size="value"
shape="circle"
/>
</Chart>
);
}
// Bubble chart
function BubbleChart() {
return (
<Chart height={400} data={data} autoFit>
<Point
position="x*y"
color="category"
size={["z", [4, 65]]}
opacity={0.7}
/>
</Chart>
);
}Creates polygon marks for geographic visualizations and complex shapes.
/**
* Polygon geometry for geographic and complex shape visualizations
*/
declare const Polygon: React.FC<IBaseGemoProps>;Creates heatmap visualizations for matrix data and correlation analysis.
/**
* Heatmap geometry for matrix data visualization
*/
declare const Heatmap: React.FC<IBaseGemoProps>;Usage Examples:
// Basic heatmap
function BasicHeatmap() {
return (
<Chart height={400} data={data} autoFit>
<Heatmap
position="x*y"
color="value"
size="value"
/>
</Chart>
);
}Creates schema marks for candlestick charts and box plots.
/**
* Schema geometry for candlestick and box plot visualizations
*/
declare const Schema: React.FC<IBaseGemoProps>;Usage Examples:
// Candlestick chart
function CandlestickChart() {
return (
<Chart height={400} data={data} autoFit>
<Schema
position="date*[open,close,high,low]"
color="trend"
shape="candle"
/>
</Chart>
);
}Creates edge marks for network and relationship visualizations.
/**
* Edge geometry for network and relationship visualizations
*/
declare const Edge: React.FC<IBaseGemoProps>;Creates custom path marks for complex line visualizations.
/**
* Path geometry for custom path visualizations
*/
declare const Path: React.FC<IBaseGemoProps>;Enhanced line geometry with additional features and styling options.
/**
* Advanced line geometry with enhanced features
*/
declare const LineAdvance: React.FC<IBaseGemoProps>;Base geometry class that provides the foundation for all geometry types. Used for advanced customization and creating custom geometry components.
/**
* Base geometry component providing foundation for all geometry types
*/
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;
}
declare const BaseGeom: React.FC<IBaseGeomProps>;Usage Examples:
// Custom geometry using BaseGeom
function CustomGeometry() {
return (
<Chart height={400} data={data} autoFit>
<BaseGeom
type="interval"
position="x*y"
color="category"
onCreate={(geom) => {
// Custom geometry configuration
geom.style('stroke', '#fff');
geom.style('lineWidth', 1);
}}
/>
</Chart>
);
}Generic geometry component that can render any geometry type based on configuration.
/**
* Generic geometry component for dynamic geometry types
*/
interface IGeomProps extends IBaseGemoProps {
/** Geometry type (point, line, area, interval, polygon, schema, edge, path) */
type?: string;
}
declare const Geom: React.FC<IGeomProps>;Usage Examples:
// Dynamic geometry based on type
function DynamicGeometry({ geometryType, data }) {
return (
<Chart height={400} data={data} autoFit>
<Geom
type={geometryType}
position="x*y"
color="category"
/>
</Chart>
);
}Configures labels for any geometry component.
/**
* Label component for geometry labeling
*/
interface ILabelProps {
/** Label content or callback */
content?: string | string[] | LabelCallback;
/** Label style */
style?: object;
/** Label position */
position?: string;
/** Label offset */
offset?: number;
/** Label rotation */
rotate?: number;
/** Label formatter */
formatter?: (text: string, item: any, index: number) => string;
}
declare const Label: React.FC<ILabelProps>;// Callback function types
type ColorAttrCallback = (datum: any) => string;
type ShapeAttrCallback = (datum: any) => string;
type SizeAttrCallback = (datum: any) => number;
type StyleCallback = (datum: any) => object;
type LabelCallback = (datum: any) => string | object;
type TooltipCallback = (title: string, items: any[]) => string | object;
// Configuration types
type SizeRange = [number, number];
type StyleOption = object;
type StateOption = object;
type SelectOption = object;
type AnimateOption = boolean | object;
type AdjustOption = {
type: string;
marginRatio?: number;
dodgeBy?: string;
reverseOrder?: boolean;
};
// Tooltip configuration
interface GeometryTooltipOption {
fields?: string[];
callback?: TooltipCallback;
showTitle?: boolean;
showMarkers?: boolean;
showCrosshairs?: boolean;
crosshairs?: object;
}
// Label configuration
interface LabelOption {
fields?: string[];
callback?: LabelCallback;
rotate?: number;
offset?: number;
position?: string;
content?: string | string[];
style?: object;
}
interface GeometryLabelCfg extends LabelOption {
type?: string;
labelLine?: boolean | object;
labelEmit?: boolean;
layout?: object | object[];
}