chartly-charts/README.md

Modern themed charts for React applications

# Chartly 📊

Beautiful, themed charts for React applications built on top of Recharts.

## Features

- 🎨 **Multiple Themes**: Neomorphism, Glassmorphism, Techno, Cyberpunk, Ocean, Sunset, and Dark Mode
- 📱 **Responsive**: Charts adapt to container size
- ⚡ **TypeScript**: Full TypeScript support with type definitions
- 🎯 **Easy to Use**: Simple API with sensible defaults
- 🔧 **Customizable**: Extensive customization options
- 📈 **Chart Types**: Line, Bar, and Area charts

## Installation

```bash
npm create vite@latest
```
```bash
npm install chartly-charts
```

## Quick Start

```jsx
import React from 'react';
import { ThemedLineChart } from 'chartly';

const data = [
  { name: 'Jan', value: 4200 },
  { name: 'Feb', value: 3200 },
  { name: 'Mar', value: 2800 },
  { name: 'Apr', value: 3800 },
  { name: 'May', value: 4500 },
];

function App() {
  return (
    <ThemedLineChart
      theme="glassmorphism"
      data={data}
      rounded={true}
      glow={true}
      shadow="medium"
      tooltip
      xAxisLabel="Month"
      yAxisLabel="Sales ($)"
      showGrid={true}
      gridStyle="solid"
      legend
      legendPosition="bottom"
      height={400}
      responsive
      dataKey="value"
      strokeWidth={3}
    />
  );
}
```

## Available Themes

- `neomorphism` - Soft, elevated design
- `glassmorphism` - Translucent glass effect
- `techno` - Neon green tech aesthetic
- `cyberpunk` - Retro-futuristic design
- `ocean` - Ocean-inspired blues
- `sunset` - Warm sunset colors
- `darkMode` - Clean dark theme

## Chart Types

### Line Chart
```jsx
import { ThemedLineChart } from 'chartly';

<ThemedLineChart
  theme="glassmorphism"
  data={data}
  strokeWidth={3}
  // ... other props
/>
```

### Bar Chart
```jsx
import { ThemedBarChart } from 'chartly';

<ThemedBarChart
  theme="techno"
  data={data}
  barRadius={4}
  // ... other props
/>
```

### Area Chart
```jsx
import { ThemedAreaChart } from 'chartly';

<ThemedAreaChart
  theme="ocean"
  data={data}
  fillOpacity={0.6}
  // ... other props
/>
```

## Props

All charts share these common props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `any[]` | Required | Chart data array |
| `theme` | `string` | `"neomorphism"` | Theme name |
| `rounded` | `boolean` | `false` | Rounded corners |
| `glow` | `boolean` | `false` | Glow effect (techno theme) |
| `shadow` | `"small" \| "medium" \| "large"` | `"medium"` | Shadow size |
| `tooltip` | `boolean` | `true` | Show tooltip on hover |
| `xAxisLabel` | `string` | `undefined` | X-axis label |
| `yAxisLabel` | `string` | `undefined` | Y-axis label |
| `showGrid` | `boolean` | `true` | Show grid lines |
| `gridStyle` | `"solid" \| "dashed" \| "dotted"` | `"solid"` | Grid line style |
| `legend` | `boolean` | `false` | Show legend |
| `legendPosition` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Legend position |
| `width` | `number` | `600` | Chart width |
| `height` | `number` | `400` | Chart height |
| `responsive` | `boolean` | `true` | Responsive behavior |
| `dataKey` | `string` | `"value"` | Data key for values |
| `className` | `string` | `""` | Additional CSS classes |

## Data Format

Your data should be an array of objects with at least a `name` property and your data key:

```javascript
const data = [
  { name: 'Category 1', value: 100 },
  { name: 'Category 2', value: 200 },
  { name: 'Category 3', value: 150 },
];
```

## License

MIT © Shoari