Data Visualization.
Premium Charts.
Meticulously crafted data visualizations. Built with Recharts and seamlessly integrated.
3D Depth Area
Isometric solid block extrusion. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Basic Area
Default area with gradient fill and smooth curve Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Brush Zoom Area
Use the brush strip to select and zoom into a time range Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Pro
Circle Pattern Area
Area chart with a dense pattern circles mesh texture Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Compressed Gradient Area
Gradient fades out quickly near the top Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Dashed Line Area
The entire line is dashed, except for the solid highlighted segment on hover Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Dot Grid Background Area
Area chart over a dot grid texture with edge fade Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Dual Axis Area
Independent left and right scales (biaxial) Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Fade Edges Area
Area fill fades at the left and right edges Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Pro
Hexagon Pattern Area
A beautifully designed Hexagon Pattern Area data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Left Axis Area
Both series share the left scale with explicit Y-axis labels Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Linear Area
Straight lines between data points Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Loading Area
Shimmering grid, pulsing foreground segment, and shimmer label while data loads Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Loading Sweep Area
Diagonal shimmer sweeping across the skeleton area while data loads Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
No Stroke Area
Softer look with the stroke line hidden Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Pattern Area
Diagonal line pattern fill instead of gradient Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Pattern Background Area
Area chart with a diagonal pattern fill instead of grid lines Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Reference Band Area
Horizontal Y band behind the series with dashed edges and bracket markers Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Series Markers Area
Scatter-style ring markers at each point Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Solid Area
Solid fill with no gradient fade Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Stacked Area
Layered areas comparing desktop and mobile Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Step Area
Discrete step interpolation between points Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Step Stacked Area
Layered step areas comparing desktop and mobile Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.
Pro
Wave Pattern Area
Area chart featuring fluid wave patterns filling the area underneath Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready area charts element.