Simple Graph

Animated line graph w/ custom interactions and advanced customization

simple-graph-tw

Line Color

Dot Color

Grid Style

Grid Lines

Data Set

Height500px

Animation Duration2s

Grid Line Thickness2px

Graph Line Thickness3px

Dot Size10px

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