Bars
Bars
loading
default: 'false'
boolean
Adds Loading Animation
glow
default: 'false'
boolean
Adds glow effect to bars
size
default: '50'
number
Size of the bars as percent 0-100
radius
default: '0'
number
Radius of the bars as angle 0-360
Legend
position
'top' | 'right' | 'bottom' | 'left'
Required
Positions legend element as row/column depending on option in correct 'slot'
top
right
bottom
left
alignment
default: 'center'
'center' | 'start' | 'end'
Aligns the content within legend.
center
start
end
GridLines
border
default: 'false'
boolean
Adds Border To Graph
horizontal
default: 'false'
boolean
Adds horizontal grid lines to graph
vertical
default: 'false'
boolean
Adds vertical grid lines to graph
XAxis
title
ReactNode
Months
description
ReactNode
YAxis
title
ReactNode
Cookies Sold
description
ReactNode
chart
code
Male
Female
Cookies Sold
0
0
10,000
10,000
20,000
20,000
30,000
30,000
40,000
40,000
50,000
50,000
5K
45K
20K
10K
45K
15K
20K
30K
Jan
Feb
Mar
Apr
Jan
Feb
Mar
Apr
Months
Examples
Playground
Positive/Negative Bars
Positive/Negative Bars - Anchoring at 500_000
Stacked Bars
Horizontal Bars
Bars percent / 100