Data Visualization.
Premium Charts.
Meticulously crafted data visualizations. Built with Recharts and seamlessly integrated.
Pro
3D Depth Bar
Glass-block bars with perspective side + top faces Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
3D Stacked Bar
Stacked depth bars split into per-segment side faces Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Basic Bar
Default vertical bar chart with rounded caps Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
Circle Pattern Bar
Bar chart filled with dense pattern circles Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Custom Tooltip Bar
Formatted currency values in tooltip Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
Dashed & Solid Bar
Dashed outline with background, solid on hover Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
Dashed Outline Bar
A beautifully designed Dashed Outline Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Dense Data Bar
High density continuous date scale Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Dot Grid Background Bar
Bar 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 bar charts element.
Dual Axis Bar
A beautifully designed Dual Axis Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Gradient Bar
A beautifully designed Gradient Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Horizontal Bar
A beautifully designed Horizontal Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Horizontal Single Bar
A beautifully designed Horizontal Single Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Left Axis Bar
Grouped vertical bars with a single left value scale Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Loading Bar
Diagonal shimmer sweeping across placeholder bars while data loads Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Multiple Series Bar
Grouped bars comparing two metrics Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
No Gap Bar
Zero gap with gradient and animated line indicator Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Outline Bar
A beautifully designed Outline Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pattern Background Bar
Bar 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 bar charts element.
Pattern Bar
A beautifully designed Pattern Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pattern Reference Band Bar
Bar chart featuring a pattern fill inside the reference band Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Reference Band Bar
Bar chart featuring a horizontal Y band behind the series with dashed edges Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
Shape Gradient Bar
Discrete square columns with per-series gradient Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
Squircle Ring Bar
A beautifully designed Squircle Ring Bar data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Stacked Bar
Stacked bars with gap between segments Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.
Pro
Wave Pattern Bar
Bar chart featuring fluid wave patterns filling the columns Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready bar charts element.