@ahmed_alsanadi/react-d3-charts

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

Prop	Type	Default	Description
data	LineDataPoint[]	required	Array of data points
width	number	600	Chart width
height	number	400	Chart height
margin	Margin	{ top: 20, right: 30, bottom: 30, left: 40 }	Chart margins
xAccessor	(d: DataPoint) => number	d => d.x	Function to access x values
yAccessor	(d: DataPoint) => number	d => d.y	Function to access y values
color	string	'steelblue'	Line color
className	string	''	Additional CSS classes

BarChart Props

Prop	Type	Default	Description
data	BarDataPoint[]	required	Array of data points
width	number	600	Chart width
height	number	400	Chart height
margin	Margin	{ top: 20, right: 30, bottom: 30, left: 40 }	Chart margins
xAccessor	(d: DataPoint) => string	d => d.x	Function to access x values
yAccessor	(d: DataPoint) => number	d => d.y	Function to access y values
color	string	'steelblue'	Bar color
className	string	''	Additional CSS classes

NetworkGraph Props

Prop	Type	Default	Description
data	NetworkNode	required	Root node of the network
width	number	800	Graph width
height	number	600	Graph height
nodeRadius	number	20	Radius of nodes
nodeColor	string	'#3b82f6'	Color of nodes
linkColor	string	'#94a3b8'	Color of links
linkWidth	number	2	Width of links
className	string	''	Additional CSS classes

License

MIT