Search
Charts

A Charts component for displaying a graphic representation, as by curves, of a dependent variable, as temperature, price, etc.;

Charts

Chart kit combination display

You can flexibly combine charts that meet design specifications to meet complex business needs.

Chart card

The card container used to display charts can be easily combined with other chart kits to display rich information.

Mini area chart

Mini area chart

Mini histogram

Mini histograms are more suitable for displaying simple interval data, and the concise way of expression can greatly reduce the visual display pressure of large amounts of data.

Mini progress bar

Mini progress bar

Histogram

Through settings xand yattributes, a beautiful histogram can be quickly constructed, and the relationships of various latitudes are displayed through custom data.

Pie chart

Pie chart

Mini pie chart

By simplifying the Piesetting properties, can achieve rapid minimalist pie charts, can be used with ChartCardcompositions exhibit more business scenarios.

Radar chart

Radar chart

Wave chart

The wave chart is a proportional display method, which can display the proportion of key values ​​more intuitively.

Chart with timeline

Use TimelineChartcomponent histogram can be achieved with the timeline of the show, of which the xproperty is pointing to the time value of default simultaneously supports up to two indicators show, respectively, y1and y2.

Candlestick Charts

Candlesticks show that emotion by visually representing the size of price moves with different colors.

API

ChartCard

PropertyDescriptionTypeDefault
title
Card title
ReactNode|string
-
action
Card operation
ReactNode
-
total
Total amount of data
ReactNode | number | function
-
footer
Bottom of card
ReactNode
-
contentHeight
Content area height
number
-
avatar
Right icon
React.ReactNode
-

ChartCard

PropertyDescriptionTypeDefault
color
Chart color
string
#3B4150
height
Chart height
number
-
data
data
array<{x, y}>
-

MiniArea

PropertyDescriptionTypeDefault
color
Chart color
string
#FFE9E6
borderColor
Chart edge color
string
#ED615C
height
Chart height
number
-
line
Whether to show stroke
boolean
false
animate
Whether to show animation
boolean
true
xAxis
x-axis configuration
object
-
yAxis
y-axis configuration
object
-
data
data
array<{x, y}>
-

MiniProgress

PropertyDescriptionTypeDefault
target
Target ratio
number
-
color
Chart color
string
#3B4150
strokeWidth
Height of progress bar
number
-
percent
Progress ratio
number
-

Bar

PropertyDescriptionTypeDefault
title
Chart title
ReactNode|string
-
color
Chart color
string
#3B4150
padding
Internal chart spacing
array
'auto'
height
Chart height
number
-
data
data
array<{x, y}>
-
autoLabel
When the width is insufficient, the x-axis label is automatically hidden
boolean
true

Pie

PropertyDescriptionTypeDefault
animate
Whether to show animation
boolean
true
color
Chart color
string
rgba(24, 144, 255, 0.85)
height
Chart height
number
-
hasLegend
Whether to display legend
boolean
false
padding
Internal chart spacing
array
'auto'
percent
Percentage
number
-
tooltip
Whether to show tooltip
boolean
true
valueFormat
Display value formatting function
function
-
title
Chart title
ReactNode|string
-
subTitle
Chart subtitle
ReactNode|string
-
total
Total number in the center of the icon
string
function

Radar

PropertyDescriptionTypeDefault
title
Chart title
ReactNode|string
-
height
Chart height
number
-
hasLegend
Whether to display legend
boolean
false
padding
Internal chart spacing
array
'auto'
data
data
array<{name,label,value}>
-

Gauge

PropertyDescriptionTypeDefault
title
Chart title
ReactNode|string
-
height
Chart height
number
-
color
Chart color
string
#2F9CFF
bgColor
Chart background color
string
#F0F2F5
percent
Progress ratio
number
-

WaterWave

PropertyDescriptionTypeDefault
title
Chart title
ReactNode|string
-
height
Chart height
number
-
color
Chart color
string
#1890FF
percent
Progress ratio
number
-

TimelineChart

PropertyDescriptionTypeDefault
data
data
Array<x, y1, y2>
-
titleMap
Indicator alias
Object{y1:'Passenger Flow', y2:'Number of Payments'}
-
height
Chart height
number
400

Field

PropertyDescriptionTypeDefault
label
title
ReactNode|string
-
value
value
ReactNode|string
-

Chart

PropertyDescriptionTypeDefault
data
A data source is a collection of objects.
array
-
height
Set the height of the chart.
number
-
width
Set the width of the chart.
number
-
autoFit
The chart size is adaptive, and the width and height of the outer container will be adapted
boolean
false
scale
Configure the scale of the chart.
object
-

Schema

PropertyDescriptionTypeDefault
position
The coordinates of the turning point of the drawn graph. Example "x*y".
string
-
shape
The method of mapping data values ​​to the shape of the graph. Support the following usage. Example "box".
string/array
-
size
Used to configure the width of the graphic. There are several usages:
string/array/number
-
style
Configure the style of geometric figures.
object/number
-
tooltip
Control the tooltip switch of the current Geometry geometry mark, the Geometry data will not be displayed in the tooltip content box
string/object/array
-

ChartTooltip

PropertyDescriptionTypeDefault
showTitle
Whether to display the tooltip title.
boolean
-
showMarkers
Whether to display the current data mark where the mouse is located.
boolean
itemTpl
The default template of each record. The class of each dom node must be included when customizing the template. The display content of the tooltip can be formatted.
string