flowvis

flowvis is a lightweight React.js library for rendering interactive, responsive, and animated D3.js charts.
It is designed to simplify chart creation in modern React apps while retaining the full power of D3 under the hood.

✨ Features

• Easy-to-use React components for common chart types
• Smooth animated transitions
• Small bundle size
• Full typescript
• Responsive charts that auto-fit their containers
• Simple styling with the included CSS
• Powered by D3.js + React

📦 Installation

npm install flowvis@latest

To use a bar chart component import these:

import { BarChart } from 'flowvis';
import 'flowvis/dist/flowvis.css';

Render the chart inside a container with explicit width and height:

<div>
  
</div>

Example: sortable stacked bar chart

import { StackedBarChart } from "flowvis"; 
import 'flowvis/dist/flowvis.css';

export default function StackedBarChartExample() {  
  export const stackData2 = [
    {
      label: "Initech",
      alpha: 14900,
      beta: 8800,
      delta: 9600,
      epsilon: 5400,
      theta: 6100,
    },
    {
      label: "Umbrella",
      alpha: 6800,
      beta: 7400,
      delta: 17100,
      epsilon: 9300,
      theta: 5200,
    },
    {
      label: "Hooli",
      alpha: 6900,
      beta: 10400,
      delta: 7400,
      epsilon: 16200,
      theta: 5700,
    },  
    {
      label: "Aperture Labs",
      alpha: 8200,
      beta: 9100,
      delta: 14300,
      epsilon: 7600,
      theta: 4600,
    },  
    {
      label: "Cyberdyne Systems",
      alpha: 18800,
      beta: 9700,
      delta: 6900,
      epsilon: 8300,
      theta: 6200,
    },
    {
      label: "Massive Dynamic",
      alpha: 9600,
      beta: 7800,
      delta: 4900,
      epsilon: 7200,
      theta: 15500,
    },
  ];

  return (
    <div>
      
    </div>
  );
}

For full explanations on the options and properties, with live demo:

Visit the flowvis documentation.

Or you can grab the source code at:

the github repo