onion_graph

A React component for creating beautiful, responsive onion diagrams that visualize hierarchical data with concentric circles

Install

npm install --save onion_graph

Usage

import React from 'react'
import { OnionGraph } from 'onion_graph'

const App = () => {
  const data = [
    { label: 'TAM', value: 1000000000, color: '#E8F4F9' },  // $1B
    { label: 'SAM', value: 500000000, color: '#B7E4F9' },   // $500M
    { label: 'SOM', value: 100000000, color: '#74CBFF' }    // $100M
  ]

  return (
    <OnionGraph
      data={data}
      width={600}               // Optional: defaults to 600
      height={window.innerHeight * 0.8}  // Optional: defaults to 80% of window height
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | array | Required | Array of objects with label, value, and color properties | | width | number | 600 | Width of the graph in pixels | | height | number | window.innerHeight * 0.8 | Height of the graph in pixels | | currency | string | 'USD' | Currency symbol to display before values (e.g., '$', '€', '£') |

Data Format

Each object in the data array should have the following properties:

• label: Text label for the circle (e.g., 'TAM', 'SAM', 'SOM')
• value: Numeric value that determines the circle's size
• color: Color for the circle (any valid CSS color)

The circles are drawn from largest to smallest, with the first item in the array being the outermost circle.

Features

• Responsive design that maintains proportions
• Automatic sizing based on container dimensions
• Proportional circle areas based on values
• Dynamic font sizing for optimal readability
• Bottom-aligned concentric circles
• Automatic value formatting in billions (USD)

Example Usage

import { OnionGraph } from 'onion_graph';

const data = [
  { value: 25000000000, label: "TAM", color: "#8fd19e" },
  { value: 5000000000, label: "SAM", color: "#41a749" },
  { value: 1000000000, label: "SOM", color: "#0c6a0f" }
];

function App() {
  return (
    <OnionGraph
      data={data}
      width={600}
      height={400}
      currency="€"
    />
  );
}

License

MIT © haider-wazir