### HTML Setup for CDN Usage
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/使用指南/基础教程/快速开始.md
Example HTML structure for loading React, ReactDOM, and BizCharts via CDN links to support externalized modules.
```html
```
--------------------------------
### Configure Guide Lines
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/LineChart.md
Demonstrates how to configure both statistical (e.g., mean) and custom guide lines using start/end coordinates or percentage positions.
```javascript
guideLine={[
{
type: 'mean',
lineStyle: {},
text: {}
}
]}
```
```javascript
guideLine={[
{
start: ['2010-01-01', 100],
end: ['2010-01-10', 50],
lineStyle: {},
text: {}
}
]}
```
--------------------------------
### Install and Initialize DataSet
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/使用指南/开发者教程/使用DataSet.md
Methods for including the DataSet library in a project, either via browser script tags or npm package installation.
```html
```
```bash
npm install @antv/data-set --save
```
```javascript
import { View } from '@antv/data-set';
const dv = new View();
```
--------------------------------
### BizCharts Path: Label Configuration Examples
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/图形组件/Path.md
Illustrates how to configure labels for the path. Examples show displaying field values, customizing text color, and using callback functions for conditional styling and content formatting.
```javascript
// const data = [ {x: 1, y: 2, z: 'a'}, {x: 2, y: 2, z: 'b'} ]
// 在每个图形上显示 y 字段对应的数值
```
```javascript
// 在每个图形上显示 x 字段对应的数值，同时配置文本颜色为红色
```
```javascript
// 渲染每个图形上显示 x 字段对应的数值，同时格式化文本内容,以及配置条件样式。
{
return {
content: xValue + '%',
style: {
fill: 'red',
}
};
}
]}
/>
```
--------------------------------
### Install BizGoblin via npm
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizGoblin/使用指南/快速入门.md
Command to install the BizGoblin package into your project using npm.
```bash
npm install bizgoblin --save
```
--------------------------------
### Line Annotation Example
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/基础组件/Annotation.md
Demonstrates how to use the Line annotation to draw a line with text. It shows configuration for start and end points, and text properties like position, content, and offset.
```javascript
import { Chart, Annotation } from '@antv/bizcharts';
// ... chart configuration
{/* ... other chart elements */}
```
--------------------------------
### Install BizCharts via NPM
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/使用指南/基础教程/快速开始.md
The standard command to install the BizCharts package into a React project using NPM.
```bash
npm install bizcharts --save
```
--------------------------------
### Configure PieChart Data and Appearance with BizCharts
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/PieChart.md
Provides an example of how to configure a PieChart with data, metadata for formatting, and visual properties like xField, yField, and angleField. This snippet illustrates data binding and basic chart setup.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
{
return `${v}个`
}
}
}}
// highlight-end
xField="year"
yField="value"
angleField="country"
/>
```
--------------------------------
### Configuring Interval Labels
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/图形组件/Interval.md
Examples of how to display and format labels on top of interval shapes.
```javascript
{
return {
content: xValue + '%',
style: {
fill: 'red',
}
};
}
]}
/>
```
--------------------------------
### Install Multiple BizCharts Versions via NPM Alias
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/使用指南/基础教程/BizCharts 4.0 升级.md
Instructions for installing and using multiple versions of BizCharts in the same project using NPM aliases.
```bash
npm install bizcharts3@npm:bizcharts@3
npm install bizcharts4@npm:bizcharts@4
```
--------------------------------
### ScatterChart Data Mapping Example
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/ScatterChart.md
An example demonstrating how to map data to the ScatterChart, including configuration for fields and metadata.
```APIDOC
## ScatterChart Data Mapping Example
### Description
This example illustrates how to provide data and configure metadata for the ScatterChart.
### Example Code
```js
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
`${v}个`,
}
}}
xField="value"
yField="type"
/>
```
```
--------------------------------
### Configure Statistical Guide Lines for TinyAreaChart
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/迷你图表/TinyAreaChart.md
Demonstrates how to add a statistical guide line (e.g., mean) to the chart using the guideLine property. This configuration accepts an array of objects defining the type and styling of the line.
```javascript
guideLine={[
{
type: 'mean',
lineStyle: {},
text: {},
},
]}
```
--------------------------------
### Configure RangeColumnChart Guide Lines
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/RangeColumnChart.md
Add statistical or custom guide lines to the RangeColumnChart. Guide lines can be configured with types like 'mean', 'max', 'min', or defined by start and end points. Styling and text for guide lines are also customizable.
```javascript
guideLine={[
{
type: 'mean',
lineStyle: {},
text: {},
},
]}
```
```javascript
guideLine={[
{
start: ['2010-01-01', 100] || ['0%', '50%'],
end: ['2010-01-10', 50] || ['100%', '80%'],
lineStyle: {},
text: {},
},
]}
```
--------------------------------
### Configure Custom Guide Lines for TinyAreaChart
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/迷你图表/TinyAreaChart.md
Shows how to define custom guide lines by specifying start and end coordinates. Coordinates can be provided as raw data values or percentage-based positions within the plot area.
```javascript
guideLine={[
{
start: ['2010-01-01', 100],
end: ['2010-01-10', 50],
lineStyle: {},
text: {},
},
]}
```
--------------------------------
### Configure Guide Lines in BizCharts (Custom)
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/StackedAreaChart.md
This snippet illustrates how to configure custom guide lines in BizCharts. It requires specifying the 'start' and 'end' points, which can be defined using raw data values or percentages of the plot area.
```javascript
guideLine={[
{
start: ['2010-01-01', 100] || ['0%', '50%'],
end: ['2010-01-10', 50] || ['100%', '80%'],
lineStyle: { stroke: 'blue', lineDash: [5, 5] },
text: { content: 'Custom Line', position: 'end', style: { fill: 'blue' } },
},
]}
```
--------------------------------
### Guide Line Component Configuration (Custom)
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/StackedColumnChart.md
Configures custom guide lines on charts by specifying start and end points. These points can be defined using raw data values or percentages of the plotting area. Styling for the line and text is also supported.
```javascript
guideLine={[
{
start: ['2010-01-01', 100] || ['0%', '50%'],
end: ['2010-01-10', 50] || ['100%', '80%'],
lineStyle: {},
text: {},
},
]}
```
--------------------------------
### Configure Chart Guide Lines (JavaScript)
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/AreaChart.md
Configures guide lines for charts, supporting multiple lines simultaneously. Can be used for statistical lines (mean, median, etc.) or custom lines defined by start and end points. Line and text styles can also be customized.
```javascript
guideLine=[
{
type: 'mean',
lineStyle: {},
text: {},
},
]
```
```javascript
guideLine=[
{
start: ['2010-01-01', 100] || ['0%', '50%'],
end: ['2010-01-10', 50] || ['100%', '80%'],
lineStyle: {},
text: {},
},
]
```
--------------------------------
### Instantiate a DataView
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/使用指南/开发者教程/DataSet Api.md
Demonstrates how to create a new instance of a DataView. It shows both the default constructor and the constructor with configuration options for state watching.
```javascript
const dv0 = new DataSet.View();
const dv1 = new DataSet.View(ds, {
watchingStates: [ 'foo' ]
});
```
--------------------------------
### Create a Basic Chart Component
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/使用指南/基础教程/快速开始.md
Demonstrates how to import BizCharts components and render a simple chart using React.
```jsx
import React from "react";
import ReactDOM from "react-dom";
import { Chart, LineAdvance } from "bizcharts";
const data = [
{ year: "1991", value: 3 },
{ year: "1992", value: 4 }
];
function Demo() {
return (
);
}
ReactDOM.render(, mountNode);
```
--------------------------------
### Configure Arc Guide Component in BizCharts
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizGoblin/API文档/Guide.md
Defines an arc annotation on a chart. It requires start and end positions and supports custom styling and layer ordering.
```javascript
```
--------------------------------
### Implementing DonutChart
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/DonutChart.md
Demonstrates how to import and initialize the DonutChart component using standard or modular import patterns.
```javascript
import { DonutChart } from 'bizcharts';
function APP() {
return ;
}
```
```javascript
import DonutChart from 'bizcharts/lib/plots/DonutChart';
function APP() {
return ;
}
```
--------------------------------
### Initialize Basic Chart Container
Source: https://context7.com/alibaba/bizcharts/llms.txt
Demonstrates the setup of a basic Chart component using BizCharts. It includes data source configuration, scale definitions for axes, and basic layout properties like autoFit and padding.
```jsx
import React from 'react';
import { Chart, Interval, Tooltip, Legend, Axis } from 'bizcharts';
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
const scale = {
sold: {
type: 'linear',
min: 0,
max: 400,
tickCount: 5,
alias: '销量',
formatter: (val) => `${val}件`
},
genre: {
type: 'cat',
alias: '游戏类型'
}
};
function BasicChart() {
return (
{
console.log('G2 实例:', chart);
}}
>
);
}
```
--------------------------------
### Image Annotation Example
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/基础组件/Annotation.md
Shows how to add an image annotation to the chart. Requires specifying the start and end points for the image placement and the image source URL.
```javascript
import { Chart, Annotation } from '@antv/bizcharts';
// ... chart configuration
{/* ... other chart elements */}
```
--------------------------------
### Configuring Style and State
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/图形组件/Interval.md
Demonstrates how to apply custom styles and define interaction states like active or selected.
```javascript
{
const res = { lineWidth:1 };
if(city === 'hangzhou' && sales > 1000) res.stroke = "#ff0000";
else res.stroke = "#00ff00";
return res;
}]}
/>
```
--------------------------------
### guideLine Configuration
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/GroupedColumnChart.md
Configure guide lines for charts, supporting multiple lines simultaneously. This can be used for statistical lines (max, min, median, mean) or custom lines defined by start and end points.
```APIDOC
## guideLine Configuration
### Description
Configures guide lines for charts, supporting multiple lines simultaneously. Can be used for statistical lines (max, min, median, mean) or custom lines defined by start and end points.
### Parameters
#### Request Body
- **guideLine** (object[]) - Optional - Configuration for guide lines.
- **type** (string) - Optional - Type of statistical guide line (max, min, median, mean). If specified, `start` and `end` are not needed.
- **start** (array) - Required if `type` is not specified - Specifies the starting position of the guide line. Can be raw data values (e.g., `['2010-01-01', 100]`) or percentage of the plot area (e.g., `['50%', '50%']`).
- **end** (array) - Required if `type` is not specified - Specifies the ending position of the guide line. Can be raw data values (e.g., `['2010-01-01', 100]`) or percentage of the plot area (e.g., `['50%', '50%']`).
- **lineStyle** (object) - Optional - Styles for the guide line.
- **text** (object) - Optional - Settings for the guide line text.
- **position** (string) - Optional - Position of the text (start, center, end).
- **content** (string) - Optional - Content of the text.
- **offsetX** (number) - Optional - Offset in the x-direction.
- **offsetY** (number) - Optional - Offset in the y-direction.
- **style** (object) - Optional - Style of the text.
### Request Example
```javascript
guideLine={[
{
type: 'mean',
lineStyle: {},
text: {},
},
]}
```
```javascript
guideLine={[
{
start: ['2010-01-01', 100] || ['0%', '50%'],
end: ['2010-01-10', 50] || ['100%', '80%'],
lineStyle: {},
text: {},
},
]}
```
```
--------------------------------
### Render Basic Area Chart with BizGoblin
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizGoblin/使用指南/快速入门.md
Example showing how to import BizGoblin components, define data and metrics, and render an area chart to a DOM node.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Axis, Geom, Tooltip } from 'bizgoblin';
const data = [
{ time: 'Jan.', tem: 1000},
{ time: 'Feb.', tem: 2200},
{ time: 'Mar.', tem: 2000},
{ time: 'Apr.', tem: 2600},
{ time: 'May.', tem: 2000},
{ time: 'Jun.', tem: 2600},
{ time: 'Jul.', tem: 2800},
{ time: 'Aug.', tem: 2000}
];
const defs = [
{ dataKey: 'time', range: [0, 1] },
{ dataKey: 'tem', tickCount: 5, min: 0 }
];
ReactDOM.render((
), document.getElementById('id'));
```
--------------------------------
### BizCharts Guide Line Component
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizGoblin/API文档/Guide.md
The Line component draws an auxiliary line on the chart, useful for indicating averages or expected distributions. It supports custom start and end points, as well as styling options for the line.
```javascript
```
--------------------------------
### Configuring BarChart with Data and Meta in BizCharts (JavaScript)
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/BarChart.md
Provides an example of how to configure a BarChart with sample data and meta information. It showcases setting data source, aliasing fields, formatting values, and defining x, y, and color fields for the chart.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
{
return `${v}个`
}
}
}}
xField="year"
yField="value"
colorField="country"
/>
```
--------------------------------
### Configure Data and Meta Mapping
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/GroupedColumnChart.md
Shows how to provide a dataset and configure meta information such as aliases and value formatting for the chart axes.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
`${v}个` }
}}
xField="year"
yField="value"
groupField="country"
/>
```
--------------------------------
### BizCharts Guide Rect Component
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizGoblin/API文档/Guide.md
The Rect component draws an auxiliary rectangular area on the chart, useful for highlighting specific regions. It supports defining the start and end points of the rectangle and customizing its style, including fill color and border.
```javascript
```
--------------------------------
### BizCharts Scatter Plot with React
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Demo/基础散点图(BizCharts@4).md
This snippet shows how to create a basic scatter plot using BizCharts and React. It fetches data from a remote JSON file and configures the chart with point geometry, color encoding by gender, and interactive features like brushing and legend highlighting. It also includes an example of how to access the G2 instance to get filtered data during brushing and reset the brush.
```javascript
import React, { useState, useEffect } from 'react';
import {
Chart,
Point,
} from 'bizcharts';
let chartIns;
function Demo() {
const [data, setData] = useState();
useEffect(() => {
fetch('https://alifd.alibabausercontent.com/materials/@bizcharts/point-scatter/0.2.8/mock.json')
.then(res => res.json())
.then(data => {
console.log(data)
setData(data);
})
}, [])
return <>
{
chartIns = c;
c.on('beforepaint', () => {
// 获取框选出来的数据
console.log(c.filteredData)
})
})}
>
}
ReactDOM.render(, mountNode);
```
--------------------------------
### Configuring TreemapChart with Data and Meta
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/TreemapChart.md
Shows a practical example of using the TreemapChart with sample data and configuring meta information for fields like 'year' and 'value'. It demonstrates setting aliases, ranges, and formatters for data fields.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
{
return `${v}个`
}
}
}}
colorField="value"
/>
```
--------------------------------
### RadarChart Data Example
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/RadarChart.md
Provides a concrete example of how to use the RadarChart component with sample data and configuration.
```APIDOC
## RadarChart Data Example
### Description
This example demonstrates the usage of the RadarChart with sample data and configuration for meta, angleField, radiusField, and seriesField.
### Code Example
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
`${v}个`,
}
}}
angleField="value"
radiusField="type"
seriesField="type"
/>
```
```
--------------------------------
### Size Configuration
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/图形组件/Schema.md
Examples of setting the size of geometric elements using fixed values, field mapping, or custom callback functions.
```javascript
{
if(count > 1000)
return 10;
else return 1;
}]}/>
```
--------------------------------
### Configuring Tooltips and Styles
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/图形组件/Edge.md
Shows how to enable tooltips and apply dynamic styles to edges based on data values.
```javascript
{
return { x, y };
}]} />
{
const res = { lineWidth:1 };
if(city === 'hangzhou' && sales > 1000) res.stroke = "#ff0000";
else res.stroke = "#00ff00";
return res;
}]}
/>
```
--------------------------------
### Configuring ColumnChart Data and Meta
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/ColumnChart.md
Shows how to provide a data source and configure meta information for fields, including aliases and value formatting.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
`${v}个` }
}}
xField="year"
yField="value"
/>
```
--------------------------------
### Configure Data Mapping and Meta
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/StackedColumnChart.md
Shows how to provide data to the chart and configure meta information such as field aliases and value formatting.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
`${v}个` }
}}
xField="year"
yField="value"
stackField="country"
/>
```
--------------------------------
### Configuring Tooltips
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/图形组件/Interval.md
Shows how to enable and customize tooltips for the Interval component.
```javascript
{ return { x, y }; } }} />
```
--------------------------------
### Basic Facet Configuration with Fields
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/API文档/基础组件/Facet.md
Demonstrates how to configure the Facet component by specifying the fields used for data partitioning. This is a fundamental step for creating faceted visualizations.
```javascript
```
--------------------------------
### LineAdvance Component Example
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Demo/内置预设的折线图形LineAdvance.md
This example shows how to use the LineAdvance component to render a line chart with smooth curves, points, and area fill, based on provided data.
```APIDOC
## LineAdvance Component Usage
### Description
This section demonstrates the implementation of the `LineAdvance` component from BizCharts to create an advanced line chart. It includes sample data and the React code required to render the chart with features like smooth curves, data points, and area filling.
### Method
This is a component usage example, not an API endpoint.
### Endpoint
N/A
### Parameters
#### Chart Configuration (Props for `` component)
- **padding** (Array) - Optional - Padding around the chart.
- **autoFit** (Boolean) - Optional - Automatically adjusts chart size to fit its container.
- **height** (Number) - Optional - Sets the height of the chart.
- **data** (Array) - Required - The data source for the chart.
#### LineAdvance Configuration (Props for `` component)
- **shape** (String) - Optional - Specifies the shape of the line, e.g., "smooth".
- **point** (Boolean) - Optional - Renders points at each data point on the line.
- **area** (Boolean) - Optional - Fills the area below the line.
- **position** (String) - Required - Defines the mapping of data fields to chart axes (e.g., "month*temperature").
- **color** (String) - Optional - Specifies the field to use for coloring different series (e.g., "city").
### Request Example
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, LineAdvance} from 'bizcharts';
// Data source
const data = [
{
month: "Jan",
city: "Tokyo",
temperature: 7
},
{
month: "Jan",
city: "London",
temperature: 3.9
},
// ... more data
];
function Demo() {
return (
);
}
ReactDOM.render(, mountNode);
```
### Response
This component renders a chart visualization. There is no direct API response in terms of JSON.
#### Success Response (Chart Rendered)
- The chart will be rendered in the specified DOM element.
#### Response Example
(Visual rendering of the chart, no JSON example)
```
--------------------------------
### Configuring DensityHeatmapChart with Data and Meta
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/DensityHeatmapChart.md
Shows how to initialize the chart with a dataset and configure field metadata such as aliases and value formatting.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502,},
{ country: 'Asia', year: '1800', value: 635,},
{ country: 'Europe', year: '1750', value: 163,},
{ country: 'Europe', year: '1800', value: 203,},
];
`${v}个` }
}}
xField="value"
yField="type"
/>
```
--------------------------------
### Guide Line Component Configuration (Statistical)
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/StackedColumnChart.md
Configures statistical guide lines on charts, such as mean, median, min, or max. This configuration requires specifying the type and can include styling for the line and text.
```javascript
guideLine={[
{
type: 'mean',
lineStyle: {},
text: {},
},
]}
```
--------------------------------
### Dual Y-Axis and Axis Tooltip Formatting Example
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Demo/双Y轴、Axis Tooltip format.md
This example demonstrates how to create a chart with two Y-axes, each representing different metrics, and how to format the axis labels and tooltips using the `moment.js` library.
```APIDOC
## BizCharts Dual Y-Axis and Axis Tooltip Formatting
### Description
This example showcases a BizCharts implementation featuring dual Y-axes to visualize distinct data series with different scales. It also includes custom formatting for the time-based axis labels and tooltips, enhancing data readability.
### Method
N/A (This is a frontend component example)
### Endpoint
N/A (This is a frontend component example)
### Parameters
N/A (This is a frontend component example)
### Request Example
N/A (This is a frontend component example)
### Response
N/A (This is a frontend component example)
### Code Example
```javascript
import React from "react";
import {
Chart,
Axis,
Legend,
Tooltip,
Line,
Point,
} from "bizcharts";
import moment from "moment";
const data = [
{ time: "2020-07-02 10:10", call: 4, waiting: 20, people: 2 },
{ time: "2020-07-02 10:15", call: 2, waiting: 30, people: 3 },
{ time: "2020-07-02 10:20", call: 13, waiting: 18, people: 5 },
{ time: "2020-07-02 10:25", call: 9, waiting: 19, people: 1 },
{ time: "2020-07-02 10:30", call: 5, waiting: 2, people: 3 },
{ time: "2020-07-02 10:35", call: 8, waiting: 2, people: 1 },
{ time: "2020-07-02 10:40", call: 13, waiting: 1, people: 2 },
];
let chartIns = null;
const scale = {
people: {
alias: "处理中客户（个）",
tickCount: 5,
min: 0,
type: 'linear-strict'
},
waiting: {
alias: "等待中客户（个）",
tickCount: 5,
min: 0,
type: 'linear-strict'
},
time: {
alias: "时间（秒）",
},
};
const colors = ["#6394f9", "#62daaa"];
const axisLabel = {
formatter(text) {
return moment(text).format("HH:mm");
},
};
const Doubleaxes = () => (
{
chartIns = chart;
}}
>
);
export default Doubleaxes;
```
```
--------------------------------
### Configuring Data and Meta Mapping
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/RangeColumnChart.md
Shows how to provide a dataset to the chart and configure meta information such as field aliases and value formatting to enhance data presentation.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502,},
{ country: 'Asia', year: '1800', value: 635,},
{ country: 'Europe', year: '1750', value: 163,},
{ country: 'Europe', year: '1800', value: 203,},
];
`${v}个` }
}}
xField="year"
yField="value"
/>
```
--------------------------------
### StepLineChart with Data and Configuration
Source: https://github.com/alibaba/bizcharts/blob/master/docs/BizCharts@4.x/Plots/图表/StepLineChart.md
An example of configuring and rendering a StepLineChart using sample data. It showcases essential props like data, xField, yField, seriesField, and meta for data customization, including aliases and formatters.
```javascript
const data = [
{ country: 'Asia', year: '1750', value: 502 },
{ country: 'Asia', year: '1800', value: 635 },
{ country: 'Europe', year: '1750', value: 163 },
{ country: 'Europe', year: '1800', value: 203 },
];
{
return `${v}个`
}
}
}}
xField="year"
yField="value"
seriesField="country"
/>
```