Simple Graph

Animated line graph w/ custom interactions and advanced customization

simple-graph-tw

Customize

Line Color

Dot Color

Height

500px

Animation Duration

2.0s

Grid Line Thickness

2.0px

Graph Line Thickness

3.0px

Dot Size

10px

Show GridShow DotsDot Hover GlowCurved LineGradient FadePercentage DifferenceAnimate On ScrollAnimate Once

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

Default300

animationDurationnumber

Duration of the line draw animation in seconds

Default2

showGridboolean

Whether to show background grid lines

Defaulttrue

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

Default1

showDotsboolean

Whether to show dots at each data point

Defaulttrue

dotSizenumber

Size of the dots in pixels

Default6

dotHoverGlowboolean

Show glow effect behind dots when hovering

Defaultfalse

curvedboolean

Whether to curve the line between points using bezier curves

Defaulttrue

gradientFadeboolean

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

Defaultfalse

graphLineThicknessnumber

Thickness of the main graph line in pixels

Default3

calculatePercentageDifferenceboolean

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

Defaultfalse

animateOnScrollboolean

Trigger animation when the graph is scrolled into view

Defaultfalse

animateOnceboolean

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

Defaulttrue

classNamestring

Additional CSS classes for the wrapper element

Default""