react-morph-charts

React-Morph-Charts is a reusable component for React applications that displays data as a bubble chart, a bar chart, or a pie chart. The standout feature is its animated morphing: when you switch between the three chart types, the visual elements smoothly transform from one shape into another rather than simply swapping instantly. The same smooth transitions apply when you hover over items and when the browser window is resized.

You install it with npm and import it into your project. You pass it an array of data items, each with a label and a numeric value, and the component handles the rest. It renders its own toolbar at the top, with buttons to toggle between the three chart views and to switch between three visual themes. This makes it a self-contained widget you can drop into a page without building surrounding controls yourself.

Beyond the required data prop, the component accepts a range of optional settings. You can control which chart view is shown by default, or drive the view programmatically from your own code. You can adjust sizing details like the minimum bubble diameter, bar height, gaps between elements, and the maximum pie radius. A custom color palette can be passed in, or individual items can specify their own colors. You can also pass a function to format how numeric values are displayed.

The component ships with three themes called light, dark, and omg, switched via a small control in the toolbar. Theming is scoped to the component itself, meaning it does not modify the global page styles. This matters if your application already has its own theme system, because the two will not conflict. You can also persist the chosen theme to the browser's local storage if you provide a storage key, but this is off by default so the component does not write to storage without being asked.

The morphing layout uses spiral-packed bubbles that relax into a cluster, pie wedges built with CSS clipping paths, and shared transform transitions across all views. The project is licensed under MIT and includes a local development setup with a demo app.