react-waterfall-canvas-dynamic

A lightweight and high-performance React canvas waterfall chart component.

This library renders a dynamic waterfall-style visualization using the HTML canvas for better performance. It is useful for real-time data visualization such as:

• Sonar signal visualization
• Spectrograms
• Streaming sensor data
• Signal strength monitoring
• Network traffic visualization

Installation

npm install react-waterfall-canvas-dynamic

or

yarn add react-waterfall-canvas-dynamic

Basic Usage

import { WaterfallChart } from "react-waterfall-canvas-dynamic";

function App() {
  const data = [20, 40, 30, 60, 50, 80, 40];

  return (
    <div>
      <h2>Waterfall Chart Example</h2>

      <WaterfallChart data={data} height={200} width={600} color="lime" />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------ | -------- | -------- | ------------------------------------------- | | data | number[] | required | Array of numeric values used to render bars | | height | number | 200 | Canvas height | | width | number | 600 | Canvas width | | color | string | "lime" | Color used to draw waterfall bars |

Example Output

How It Works

The component uses the HTML canvas API to draw vertical bars based on the numeric values provided in the data array.

For each value in the array:

• The X position is calculated using the index
• The Y position is calculated using the height minus the value
• A rectangle is drawn representing that data point

Canvas rendering allows efficient updates for dynamic or streaming data.

Component Code Explanation

1. Props Interface

interface WaterfallChartProps {
  data: number[];
  height?: number;
  width?: number;
  color?: string;
}

This defines the input properties for the component.

• data → array of numeric values
• height → canvas height
• width → canvas width
• color → color of each waterfall bar

2. Canvas Reference

const canvasRef = useRef<HTMLCanvasElement | null>(null);

A reference to the canvas element is stored using useRef so the component can directly draw on it.

3. Drawing Logic

useEffect(() => {
  const canvas = canvasRef.current;
  if (!canvas) return;

  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  ctx.clearRect(0, 0, width, height);

  data.forEach((value, i) => {
    ctx.fillStyle = color;
    ctx.fillRect(i * 5, height - value, 4, value);
  });
}, [data, height, width, color]);

When data changes:

1. The canvas is cleared
2. Each value in the array is drawn as a vertical rectangle
3. The bar height corresponds to the numeric value

Performance Benefits

• Uses Canvas rendering
• Minimal React re-renders
• Efficient for large data sets
• Suitable for real-time visualization

Use Cases

• Sonar signal visualization
• Spectrogram waterfall displays
• Real-time IoT sensor monitoring
• Audio spectrum visualizations
• Financial tick data visualization

License

ISC