@ahmed_alsanadi/react-d3-charts v0.2.0

React D3 Charts

A modern, lightweight React charting library built with D3.js.

Features

• 📊 Line Charts
• 📊 Bar Charts
• 🕸️ Interactive Network Graphs
• 🎨 Customizable colors and dimensions
• 📱 Responsive design
• 🔧 TypeScript support
• ⚡️ Zero dependencies (except React and D3)

Installation

npm install @ahmed_alsanadi/react-d3-charts

Usage

Line Chart

import { LineChart } from '@ahmed_alsanadi/react-d3-charts';

const data = [
  { x: 0, y: 10 },
  { x: 1, y: 15 },
  { x: 2, y: 35 },
  { x: 3, y: 25 },
];

function App() {
  return (
    <LineChart
      data={data}
      width={600}
      height={400}
      color="#3b82f6"
    />
  );
}

Bar Chart

import { BarChart } from '@ahmed_alsanadi/react-d3-charts';

const data = [
  { x: 'A', y: 10 },
  { x: 'B', y: 15 },
  { x: 'C', y: 35 },
  { x: 'D', y: 25 },
];

function App() {
  return (
    <BarChart
      data={data}
      width={600}
      height={400}
      color="#10b981"
    />
  );
}

Network Graph

import { NetworkGraph } from '@ahmed_alsanadi/react-d3-charts';

const data = {
  id: 'root',
  label: 'Root',
  children: [
    {
      id: 'group1',
      label: 'Group 1',
      children: [
        { id: 'node1', label: 'Node 1' },
        { id: 'node2', label: 'Node 2' },
      ],
    },
    // ... more nodes
  ],
};

function App() {
  return (
    <NetworkGraph
      data={data}
      width={800}
      height={600}
      nodeColor="#6366f1"
    />
  );
}

API Reference

LineChart Props

BarChart Props

NetworkGraph Props

License

MIT