Simple Graph

Animated line graph w/ custom interactions and advanced customization

simple-graph-tw

Customize

Tweak the props live

Line Color

#B19EEF

Dot Color

#B19EEF

Grid Style

Grid Lines

Data Set

Height500px

Animation Duration2s

Grid Line Thickness2px

Graph Line Thickness3px

Dot Size10px

Props

Name	Type	Default	Description
`data`	DataPoint[]	`[]`	Array of data points with value and optional label properties
`lineColor`	string	`"#5227FF"`	Color of the line (CSS color value)
`dotColor`	string	`"#5227FF"`	Color of the dots at each data point (CSS color value)
`width`	string \| number	`"100%"`	Width of the graph container
`height`	number	`300`	Height of the graph in pixels
`animationDuration`	number	`2`	Duration of the line draw animation in seconds
`showGrid`	boolean	`true`	Whether to show background grid lines
`gridStyle`	"solid" \| "dashed" \| "dotted"	`"solid"`	Style of the grid lines
`gridLines`	"vertical" \| "horizontal" \| "both"	`"both"`	Which grid lines to display
`gridLineThickness`	number	`1`	Thickness of grid lines in pixels
`showDots`	boolean	`true`	Whether to show dots at each data point
`dotSize`	number	`6`	Size of the dots in pixels
`dotHoverGlow`	boolean	`false`	Show glow effect behind dots when hovering
`curved`	boolean	`true`	Whether to curve the line between points using bezier curves
`gradientFade`	boolean	`false`	Show gradient fill under the line that fades from line color to transparent
`graphLineThickness`	number	`3`	Thickness of the main graph line in pixels
`calculatePercentageDifference`	boolean	`false`	Display percentage difference between periods with trend arrows instead of absolute values
`animateOnScroll`	boolean	`false`	Trigger animation when the graph is scrolled into view
`animateOnce`	boolean	`true`	Only animate once when scrolled into view (requires animateOnScroll to be true)
`className`	string	`""`	Additional CSS classes for the wrapper element

dataDataPoint[]

Array of data points with value and optional label properties

Default:[]

lineColorstring

Color of the line (CSS color value)

Default:"#5227FF"

dotColorstring

Color of the dots at each data point (CSS color value)

Default:"#5227FF"

widthstring | number

Width of the graph container

Default:"100%"

heightnumber

Height of the graph in pixels

Default:300

animationDurationnumber

Duration of the line draw animation in seconds

Default:2

showGridboolean

Whether to show background grid lines

Default:true

gridStyle"solid" | "dashed" | "dotted"

Style of the grid lines

Default:"solid"

gridLines"vertical" | "horizontal" | "both"

Which grid lines to display

Default:"both"

gridLineThicknessnumber

Thickness of grid lines in pixels

Default:1

showDotsboolean

Whether to show dots at each data point

Default:true

dotSizenumber

Size of the dots in pixels

Default:6

dotHoverGlowboolean

Show glow effect behind dots when hovering

Default:false

curvedboolean

Whether to curve the line between points using bezier curves

Default:true

gradientFadeboolean

Show gradient fill under the line that fades from line color to transparent

Default:false

graphLineThicknessnumber

Thickness of the main graph line in pixels

Default:3

calculatePercentageDifferenceboolean

Display percentage difference between periods with trend arrows instead of absolute values

Default:false

animateOnScrollboolean

Trigger animation when the graph is scrolled into view

Default:false

animateOnceboolean

Only animate once when scrolled into view (requires animateOnScroll to be true)

Default:true

classNamestring

Additional CSS classes for the wrapper element

Default:""