Charts #

Line #

Line - Props #

Name Description Required Type Default
prop Field name. true String -
curve Convert the line to a curve, and you can customize the function. example - Boolean | Function -
dot Draw dots on coordinates. - Boolean false
width Line width. - Number 1
hideLine Hide line. - Boolean false
dashed Draw a dashed by stroke-dasharray, or configure the string sush as 5 5. - Boolean | String false
continued If some of the data in the array is null, the line will break. example - Boolean false
animated Triggers animation when the line appears or data changes. - Boolean false
animationDuration The animation duration, Default 1s. - Number 1
animationEffect The easing function, Accepts any transition timing function within the CSS spec. - String ease
color Line color. The default value from the colors of cartesian. - String colors of cartesian
showValue Display value on coordinates. - Boolean false
label Display label within the tooltip. - String -

Line - Slots #

Name Description Type Props
default Custom dots. example scoped slots { x, y, value, index, actived, color, style }

Area #

Area - Props #

Name Description Required Type Default
prop Field name. true String -
curve Convert the line to a curve, and you can customize the function. example - Boolean | Function -
dot Draw dots on coordinates. - Boolean false
width Line width. - Number 1
hideLine Hide line. - Boolean false
dashed Draw a dashed by stroke-dasharray, or configure the string sush as 5 5. - Boolean | String false
continued If some of the data in the array is null, the line will break. example - Boolean false
animated Triggers animation when the line appears or data changes. - Boolean false
animationDuration The animation duration, Default 1s. - Number 1
animationEffect The easing function, Accepts any transition timing function within the CSS spec. - String ease
color Line color. The default value from the colors of cartesian. - String colors of cartesian
fillColor Area color. The default value from the colors of cartesian. - String colors of cartesian
showValue Display value on coordinates. - Boolean false
label Display label within the tooltip. - String -

Area - Slots #

Name Description Type Props
default Custom dots. example scoped slots { x, y, value, index, actived, color, style }

Bar #

When you use the bar chart, it's best to configure the narrow for cartesian so that there is enough space on both sides of the X axis.

Bar - Props #

Name Description Required Type Default
prop Field name. true String -
width Line width. - Number 1
animated Triggers animation when the line appears or data changes. - Boolean false
animationDuration The animation duration, Default 1s. - Number 1
animationEffect The easing function, Accepts any transition timing function within the CSS spec. - String ease
color The default value from the colors of cartesian. - String colors of cartesian
showValue Display value on coordinates. - Boolean false
label Display label within the tooltip. - String -

Bar - Slots #

Name Description Type Props
default Custom dots. example scoped slots { x, y, value, index, actived, color, style }

Pie #

Name Description Required Type Default
prop Field name. true String -
translate Transalate the center of the pie chart. false Array<String> | String [50%, 50%]
radius Specific the inner radius and outer radius. false Array<Number> | Number [0, 100]
angles Specific the start angle and end angle. false Array<Number> | Number [0, Math.PI * 2]
showLabel Whether to display the label of each fan. false Boolean false
labelProp The label to diplay as label. false String label

Objects #

Cartesian #

A cartesian plane.

Cartesian - Props #

Name Description Required Type Default
data An array of objects. true Array<Object> -
height The height of SVG. - Number 300
width The width of SVG. - Number 600
autoresize Automatically changes the width when the window resize. - Boolean false
padding Similar CSS padding. You can specifically up right bottom left by an array of numbers. such as [0, 10, 20, n => n + 30] - Number | Array 8
bound Specify low and high points on the Y axis. such as [0, 100] or [n => n - 100, n => n + 100] - Array<Number | Function> -
narrow Leave width on both sides of the X axis. If ture, the value is half the x scale. example - Boolean
Number
Function		 -
distance Only work for Bar. The distance between each bar. - Number 0
stacked Stacking charts. - Boolean false
colors Chart color from colors. true Array<String> ['#3fb1e3',
'#6be6c1',
'#626c91',
'#a0a7e6',
'#c4ebad',
'#96dee8']
textColor Axis and text color. true String #999

Cartesian - Slots #

Name Description Type Props
default charts or SVG elements. slots -

Polar #

A polar coordinates.

Polar - Props #

Name Description Required Type Default
data An array of objects. true Array<Object> -
height The height of SVG. - Number 300
width The width of SVG. - Number 600
autoresize Automatically changes the width when the window resize. - Boolean false
stacked Stacking charts. - Boolean false
colors Chart color from colors. true Array<String> ['#3fb1e3',
'#6be6c1',
'#626c91',
'#a0a7e6',
'#c4ebad',
'#96dee8']
textColor Text color. true String #999
fillContaier Allows the contained pie to fill its container - Boolean false

Polar - Slots #

Name Description Type Props
default charts or SVG elements. slots -

XAxis #

XAxis - Props #

Name Description Required Type Default
prop Field name. true String -
color Axis and text color. - String textColor of cartesian
tickSize The width of tick. - Number 5
fontSize Font size. - Number 15
format Format data, such as append unit. - Function -
gridline Display grideline. - Boolean false
gridlineInterval Display grid-lines base on an interval - Function | Number -
dashed Grid dotted line. - Boolean | String false
interval Display tick based on the ticks of the interval - Function | Number -

YAxis #

YAxis - Props #

Name Description Required Type Default
prop Field name. true String -
color Axis and text color. - String textColor of cartesian
tickSize The width of tick. - Number 5
fontSize Font size. - Number 15
format Format data, such as append unit. - Function -
gridline Display grideline. - Boolean false
dashed Gridline style. - Boolean | String false
interval Display tick based on the ticks of the interval - Function | Number -
nbTicks Renders a fixed number of ticks. - Number -
ticks Renders a fixed list of ticks. - Array -
gridlineInterval Display grid-lines base on an interval - Function | Number -

XAxisInverse #

Display on the other side of X axis.

XAxisInverse - Props #

Name Description Required Type Default
prop Field name. true String -
color Axis and text color. - String textColor of cartesian
tickSize The width of tick. - Number 5
fontSize Font size. - Number 15
format Format data, such as append unit. - Function -
gridline Display grideline. - Boolean false
gridlineInterval Display grid-lines base on an interval - Function | Number -
dashed Grid dotted line. - Boolean | String false
interval Display tick based on the ticks of the interval - Function | Number -

YAxisInverse #

Display on the other side of Y axis.

YAxisInverse - Props #

Name Description Required Type Default
prop Field name. true String -
color Axis and text color. - String textColor of cartesian
tickSize The width of tick. - Number 5
fontSize Font size. - Number 15
format Format data, such as append unit. - Function -
gridline Display grideline. - Boolean false
gridlineInterval Display grid-lines base on an interval - Function | Number -
dashed Grid dotted line. - Boolean | String false
interval Display tick based on the ticks of the interval - Function | Number -

YMarker #

YMarker - Props #

Name Description Required Type Default
color Axis and text color. - String textColor of cartesian
dashed Dotted line. - Boolean | String false
label Label. - String -
value Y axis value. - Number -
placement The position of the label. such as end middle start - String end

YRegion #

Draw a range.

YRegion - Props #

Name Description Required Type Default
color Axis and text color. - String textColor of cartesian
dashed Dotted line. - Boolean | String false
label Label. - String -
low Y axis low value. - Number -
high Y axis low value. - Number -
fillColor Fill color. - String textColor of cartesian
placement The position of the label, such as end center start - String end

Widgets #

Tooltip #

Tooltip - Props #

Name Description Required Type Default
animated Transition animation. - Boolean false
animationDuration The animation duration, Default 1s. - Number 0.5
animationEffect The easing function, Accepts any transition timing function within the CSS spec. - String ease

Tooltip - Slots #

Name Description Type Props
default Custom tooltip. example scoped slots { label, actived: { color, label, value }, index }

Legend #

Legend - Props #

Name Description Required Type Default
selectable Click toggle chart visible. - Boolean false
placement The position of the legend, such as top-start top-center top-end bottom-start bottom-middle bottom-end left-start left-middle left-end right-start right-middle right-end - String end
color Text color. - String textColor of cartesian