Chart components provide essential chart elements like axes, legends, tooltips, coordinate systems, and other interactive features that enhance data visualization and user experience.
Configures chart axes including position, styling, labels, and grid lines.
/**
* Axis component for configuring chart axes
*/
interface IAxisProps {
/** Axis field name */
name?: string;
/** Axis visibility */
visible?: boolean;
/** Axis position (top, bottom, left, right) */
position?: 'top' | 'bottom' | 'left' | 'right';
/** Axis title configuration */
title?: boolean | {
text?: string;
style?: object;
spacing?: number;
position?: string;
autoRotate?: boolean;
};
/** Axis line configuration */
line?: boolean | {
style?: object;
};
/** Tick line configuration */
tickLine?: boolean | {
style?: object;
alignTick?: boolean;
length?: number;
};
/** Sub tick line configuration */
subTickLine?: boolean | {
style?: object;
count?: number;
length?: number;
};
/** Axis label configuration */
label?: boolean | {
style?: object;
offset?: number;
rotate?: number;
autoRotate?: boolean;
autoHide?: boolean | string;
autoEllipsis?: boolean | string;
formatter?: (text: string, item: any, index: number) => string;
};
/** Grid line configuration */
grid?: boolean | {
line?: {
style?: object;
};
alternateColor?: string | string[];
closed?: boolean;
alignTick?: boolean;
};
/** Axis range */
range?: [number, number];
/** Tick count */
tickCount?: number;
/** Tick interval */
tickInterval?: number;
/** Min tick interval */
minTickInterval?: number;
/** Max tick interval */
maxTickInterval?: number;
}
declare const Axis: React.FC<IAxisProps>;Usage Examples:
import React from "react";
import { Chart, Line, Axis } from "bizcharts";
// Basic axis configuration
function BasicAxisChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" />
<Axis name="month" />
<Axis name="value" />
</Chart>
);
}
// Customized axis
function CustomAxisChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="x*y" />
<Axis
name="x"
title={{
text: "Time Period",
style: { fontSize: 14, fontWeight: 'bold' }
}}
label={{
rotate: Math.PI / 4,
formatter: (text) => `${text}月`
}}
grid={{
line: { style: { stroke: '#d9d9d9', lineDash: [3, 3] } }
}}
/>
<Axis
name="y"
position="left"
title={{ text: "Value" }}
tickCount={5}
/>
</Chart>
);
}
// Hidden axis
function NoAxisChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="x*y" />
<Axis name="x" visible={false} />
<Axis name="y" visible={false} />
</Chart>
);
}Configures chart legends for color, size, and shape mappings.
/**
* Legend component for chart legends
*/
interface ILegendProps {
/** Legend field name */
name?: string;
/** Legend visibility */
visible?: boolean;
/** Legend position */
position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/** Legend layout */
layout?: 'horizontal' | 'vertical';
/** Legend title */
title?: boolean | {
text?: string;
style?: object;
spacing?: number;
};
/** Legend background */
background?: {
padding?: number | number[];
style?: object;
};
/** Legend items per row (for horizontal layout) */
itemsPerRow?: number;
/** Legend item spacing */
itemSpacing?: number;
/** Legend item width */
itemWidth?: number;
/** Legend item height */
itemHeight?: number;
/** Legend item name style */
itemName?: {
style?: object;
spacing?: number;
formatter?: (text: string, item: any, index: number) => string;
};
/** Legend item value style */
itemValue?: {
style?: object;
alignRight?: boolean;
formatter?: (text: string, item: any, index: number) => string;
};
/** Legend marker style */
marker?: {
symbol?: string;
style?: object;
spacing?: number;
};
/** Legend offset from chart edge */
offsetX?: number;
/** Legend offset from chart edge */
offsetY?: number;
/** Legend click handler */
onClick?: (event: any) => void;
/** Legend hover handler */
onHover?: (event: any) => void;
}
declare const Legend: React.FC<ILegendProps>;Usage Examples:
// Basic legend
function BasicLegendChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" color="category" />
<Legend />
</Chart>
);
}
// Customized legend
function CustomLegendChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" color="category" />
<Legend
position="top"
layout="horizontal"
title={{ text: "Categories" }}
itemName={{
style: { fontSize: 12 },
formatter: (text) => `Series ${text}`
}}
marker={{
symbol: 'square',
style: { r: 6 }
}}
/>
</Chart>
);
}
// No legend
function NoLegendChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" color="category" />
<Legend visible={false} />
</Chart>
);
}Configures interactive tooltips for data exploration.
/**
* Tooltip component for interactive data tooltips
*/
interface ITooltipProps {
/** Tooltip visibility */
visible?: boolean;
/** Show tooltip on hover */
showTitle?: boolean;
/** Show color markers */
showMarkers?: boolean;
/** Show crosshairs */
showCrosshairs?: boolean;
/** Shared tooltip across geometries */
shared?: boolean;
/** Tooltip follow cursor */
follow?: boolean;
/** Tooltip entry animation */
enterable?: boolean;
/** Tooltip position */
position?: 'top' | 'bottom' | 'left' | 'right';
/** Tooltip offset */
offset?: number;
/** Tooltip container style */
containerStyle?: object;
/** Tooltip item style */
itemStyle?: object;
/** Tooltip title style */
titleStyle?: object;
/** Custom tooltip content */
htmlContent?: (title: string, items: any[]) => string;
/** Crosshairs configuration */
crosshairs?: {
type?: 'x' | 'y' | 'xy';
line?: {
style?: object;
};
text?: {
position?: string;
content?: string;
style?: object;
};
textBackground?: {
padding?: number | number[];
style?: object;
};
follow?: boolean;
};
/** Tooltip fields to display */
fields?: string[];
/** Tooltip formatter */
formatter?: (datum: any) => { name: string; value: any };
}
declare const Tooltip: React.FC<ITooltipProps>;Usage Examples:
// Basic tooltip
function BasicTooltipChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" />
<Tooltip />
</Chart>
);
}
// Shared tooltip
function SharedTooltipChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" color="category" />
<Tooltip
shared
showCrosshairs
crosshairs={{ type: 'x' }}
/>
</Chart>
);
}
// Custom tooltip
function CustomTooltipChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="month*value" />
<Tooltip
htmlContent={(title, items) => {
return `
<div style="padding: 10px;">
<h4>${title}</h4>
${items.map(item => `
<div style="color: ${item.color}">
${item.name}: ${item.value}
</div>
`).join('')}
</div>
`;
}}
/>
</Chart>
);
}Configures coordinate system transformations.
/**
* Coordinate component for coordinate system transformations
*/
interface ICoordinateProps {
/** Coordinate type */
type?: 'rect' | 'polar' | 'theta' | 'helix';
/** Coordinate transformations */
actions?: Array<{
type: 'transpose' | 'scale' | 'rotate' | 'reflect' | 'shear';
args?: any[];
}>;
/** Start angle for polar coordinates */
startAngle?: number;
/** End angle for polar coordinates */
endAngle?: number;
/** Inner radius for polar coordinates */
innerRadius?: number;
/** Outer radius for polar coordinates */
outerRadius?: number;
}
declare const Coordinate: React.FC<ICoordinateProps>;Usage Examples:
// Polar coordinate chart
function PolarChart() {
return (
<Chart height={400} data={data} autoFit>
<Coordinate type="polar" />
<Line position="category*value" />
</Chart>
);
}
// Transposed coordinate chart
function TransposedChart() {
return (
<Chart height={400} data={data} autoFit>
<Coordinate actions={[{ type: 'transpose' }]} />
<Interval position="category*value" />
</Chart>
);
}Creates faceted (small multiples) visualizations.
/**
* Facet component for small multiples visualization
*/
interface IFacetProps {
/** Facet type */
type?: 'rect' | 'list' | 'circle' | 'tree' | 'mirror' | 'matrix';
/** Facet fields */
fields?: string[];
/** Column count for rect facet */
cols?: number;
/** Row count for rect facet */
rows?: number;
/** Padding between facets */
padding?: number | number[];
/** Show facet titles */
showTitle?: boolean;
/** Facet title configuration */
title?: {
style?: object;
offsetX?: number;
offsetY?: number;
};
/** Each facet callback */
eachView?: (view: any, facet: any) => void;
}
declare const Facet: React.FC<IFacetProps>;Usage Examples:
// Rect facet chart
function FacetChart() {
return (
<Chart height={400} data={data} autoFit>
<Facet
type="rect"
fields={['category']}
cols={2}
eachView={(view, facet) => {
view.line().position('month*value');
}}
/>
</Chart>
);
}Adds data range slider for filtering and zooming.
/**
* Slider component for data range filtering
*/
interface ISliderProps {
/** Slider start position (0-1) */
start?: number;
/** Slider end position (0-1) */
end?: number;
/** Slider height */
height?: number;
/** Slider background style */
backgroundStyle?: object;
/** Slider foreground style */
foregroundStyle?: object;
/** Slider handler style */
handlerStyle?: object;
/** Slider text style */
textStyle?: object;
/** Slider min text */
minText?: string;
/** Slider max text */
maxText?: string;
/** Slider change callback */
onChange?: (range: [number, number]) => void;
}
declare const Slider: React.FC<ISliderProps>;Usage Examples:
// Chart with slider
function SliderChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="date*value" />
<Slider
start={0.1}
end={0.9}
height={26}
onChange={(range) => {
console.log('Selected range:', range);
}}
/>
</Chart>
);
}Manages chart lifecycle effects and updates.
/**
* Effects component for chart lifecycle management
*/
interface IEffectsProps {
children?: React.ReactNode;
}
declare const Effects: React.FC<IEffectsProps>;Configures chart interactions and behaviors.
/**
* Interaction component for chart interactions
*/
interface IInteractionProps {
/** Interaction type */
type?: string;
/** Interaction configuration */
config?: object;
}
declare const Interaction: React.FC<IInteractionProps>;Usage Examples:
// Brush interaction
function InteractiveChart() {
return (
<Chart height={400} data={data} autoFit>
<Line position="x*y" />
<Interaction type="brush-filter" />
</Chart>
);
}// Common style type
interface StyleObject {
fill?: string;
stroke?: string;
lineWidth?: number;
lineDash?: number[];
opacity?: number;
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
textAlign?: string;
textBaseline?: string;
[key: string]: any;
}
// Position types
type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
type Layout = 'horizontal' | 'vertical';
// Event handler types
type EventHandler = (event: any) => void;
type RangeChangeHandler = (range: [number, number]) => void;
type FormatterFunction = (text: string, item?: any, index?: number) => string;