Beautiful, interactive 3D charts for React — powered by Three.js and React Three Fiber

  • Offers a sleek 3D bar chart component built with Three.js and React Three Fiber, enabling rotation, zooming, and click interactions for an engaging user experience.
  • Leverages hardware-accelerated rendering and automatically scales to fit any container size, ensuring both visual fidelity and usability across device sizes.
  • Supports multiple color schemes (like blue, rainbow, random, or hex codes), axis labels, grid toggles, bar spacing, and more, while maintaining sensible defaults for quick setup.
  • Accepts both single-series (1D arrays) and multi-series (2D arrays) data, with optional click handlers (onBarClick) for deep interactivity.
  • Easily installed via NPM with peer dependencies on React, React DOM, React Three Fiber, Drei, and Three; fully compatible with client-side rendering frameworks like Next.js (requires "use client" directive).

Technology

  • React Three Fiber - React renderer for three.js
  • React.js - user interface library
  • Storybook - frontend workshop for UI development