Data Visualization.
Premium Charts.
Meticulously crafted data visualizations. Built with Recharts and seamlessly integrated.
Pro
3D Spheres Scatter
Realistic glossy marbles rendered via specular radial gradients Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Biaxial Scatter Chart
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 scatter charts element.
Pro
Blueprint Motif Scatter
A highly stylized CAD/engineering aesthetic using nested background patterns Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Control Bands Scatter
Process control tracking with statistical upper and lower limit bands Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Density Cloud Scatter
Visualizes the center of gravity in large datasets using overlapping opacity Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Depth of Field Scatter
Z-depth parallax simulated via radial bokeh blurs and overlapping shadow layers Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Dot Grid Background Scatter Chart
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 scatter charts element.
Multi-Cluster Scatter Chart
Three data cohorts separated by band — each with a unique dot style. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Neon Glow Scatter
Scatter chart points rendered with overlapping sizes and opacities to create a bloom effect Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Outlier Analysis Scatter
Isolates and highlights extreme anomalies Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pattern Background Scatter Chart
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 scatter charts element.
Pattern Reference Band Scatter Chart
Pattern fill inside the band with colored Y-axis tick labels. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Quadrant Scatter Chart
Four zone matrix — dots positioned by two independent dimensions. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Reference Band Scatter Chart
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 scatter charts element.
Pro
Small Dots Scatter Chart
Compact markers with a 2px radius and thin 1px rings. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Solid Fills Scatter Chart
A beautifully designed Solid Fills Scatter Chart data visualization chart. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Target Zone Scatter Chart
Highlights outliers breaching an acceptable SLA threshold. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Textured Bubbles Scatter
Large categorical clusters using SVG pattern fills for enhanced style and accessibility Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Wide Ring Gap Scatter Chart
1px ring, 3px dot, 5px gap between fill and ring. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.
Pro
Y Gradient Scatter Chart
Each dot is painted by its vertical position — indigo at base, coral at peak. Built with React, Tailwind CSS, and Framer Motion. Enhance your Next.js projects with this free, copy-paste ready scatter charts element.