Line Graph
Lines
curve
default: 'linear'
'linear' | 'natural' | 'monotoneX' | 'stepBefore' | 'stepAfter'
Curves lines to make them smooth or sharp.
linear
natural
monotoneX
stepBefore
stepAfter
joints
default: 'false'
boolean
Show joints between lines.
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
description
ReactNode
YAxis
title
ReactNode
description
ReactNode
chart
code
TCP Out
CPU
RAM
0
0
10
10
20
20
30
30
40
40
50
50
60
60
70
70
80
80
90
90
08/22
08/23
08/24
08/25
08/26
08/27
08/28
08/29
08/30
08/31
09/01
09/02
09/03
09/04
09/05
09/06
09/07
09/08
09/09
09/10
09/11
09/12
09/13
09/14
09/15
09/16
09/17
09/18
09/19
09/20
09/21
09/22
09/23
09/24
09/25
09/26
09/27
09/28
09/29
09/30
08/23
08/24
08/25
08/26
08/27
08/28
08/29
08/30
08/31
09/01
09/02
09/03
09/04
09/05
09/06
09/07
09/08
09/09
09/10
09/11
09/12
09/13
09/14
09/15
09/16
09/17
09/18
09/19
09/20
09/21
09/22
09/23
09/24
09/25
09/26
09/27
09/28
09/29
Examples
Playground
Timeseries with 'Registered Users' interactions: 'hovered'
Timeseries with 'New Users' interactions: 'pinned'
Timeseries with timeslot
Time Series with Custom Tooltip
Line graph with gradient mask with 'ticks' and gradient
Line Graph Date Gradient + Prediction Line