RadialValueWheel

A generic, reusable, rounded radial wheel component for React.
Perfect for visualizing segmented data in a circular, interactive format.

Features

• Fully customizable segment colors, labels, and values.
• Works with any dataset in React.
• Lightweight and dependency-free except for React and D3.

Installation

npm install radial-value-wheel

Usage

import React from "react";
import { RadialValueWheel } from "radial-value-wheel";

const data = [
  { label: "Segment 1", value: 25 },
  { label: "Segment 2", value: 50 },
  { label: "Segment 3", value: 75 }
];

function App() {
  return (
    <div style={{ width: 300, height: 300 }}>
    <RadialValueWheel
      data={data}
      outerSegmentColor="#333"
      innerSegmentColor="#fdd"
      valueTextColor="#000"
      labelTextColor="#555"
      onSegmentClick={(segment, index) => {
        console.log("Clicked segment:", segment, "at index:", index);
      }}
    />
    </div>
  );
}

export default App;