npm package: @santosh9669/shared-chart-components
Description: Cross-platform shared components library for charts
Author: santosh9669 santoshmhetre608@gmail.com
Latest version: 1.0.4

# @santosh9669/shared-chart-components

A cross-platform chart component library that works seamlessly in both React web and React Native applications using a single, unified API.

## Why Use This Library?

### 1. Truly Cross-Platform
Unlike most chart libraries that work only for web or require different implementations for mobile, this library provides identical APIs for both platforms, letting you write chart code once and use it everywhere.

### 2. Import Only What You Need
Use the specific import for your platform:
```jsx
// For web
import { BarChart, LineChart, PieChart, AreaChart } from '@santosh9669/shared-chart-components';

// For React Native
import { NativeBarChart, NativeLineChart, NativePieChart, NativeAreaChart } from '@santosh9669/shared-chart-components';
```

### 3. Simple Yet Powerful
- Lightweight with minimal dependencies
- Optimized for performance in both web and mobile
- Modern, attractive design with customizable themes
- Responsive out of the box

## Features

- 📊 Beautiful and responsive charts
- 🌐 Works in both web and React Native environments
- 🔄 Real-time data updates
- 🎨 Customizable colors and styles
- 📱 Mobile-friendly design
- 🔧 Easy to use and integrate
- 🎨 Customizable themes
- 🎨 Multiple chart types (Bar, Line, Pie, Area)

## Installation

```bash
# For both web and React Native applications
npm install @santosh9669/shared-chart-components

# For React Native, you also need peer dependencies
npm install react-native-svg
```

## Platform-Specific Usage

### For Web Applications
```jsx
import { BarChart, LineChart, PieChart, AreaChart } from '@santosh9669/shared-chart-components';

function App() {
  return (
    <div>
      <BarChart 
        data={barData} 
        title="Monthly Sales" 
      />
      <LineChart 
        data={lineData}
        title="Revenue Growth"
      />
    </div>
  );
}
```

### For React Native Applications
```jsx
import { NativeBarChart, NativeLineChart, NativePieChart, NativeAreaChart } from '@santosh9669/shared-chart-components';

function App() {
  return (
    <View>
      <NativeBarChart 
        data={barData} 
        title="Monthly Sales" 
      />
      <NativeLineChart 
        data={lineData}
        title="Revenue Growth"
      />
    </View>
  );
}
```

## Usage

### Basic Usage

```jsx
import React from 'react';
import { BarChart, useChartData } from '@santosh9669/shared-chart-components';

function App() {
  const initialData = [
    { label: 'Jan', value: 50 },
    { label: 'Feb', value: 80 },
    { label: 'Mar', value: 30 },
    { label: 'Apr', value: 90 },
    { label: 'May', value: 60 }
  ];

  const { data, updateData } = useChartData(initialData);

  return (
    <div>
      <BarChart 
        data={data} 
        title="Monthly Sales" 
        color="#1e88e5"
      />
    </div>
  );
}
```

### Props

#### BarChart Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | Array | [] | Array of objects with `label` and `value` properties |
| title | String | '' | Chart title |
| color | String | '#1e88e5' | Bar color |
| height | Number | 200 | Chart height in pixels |
| width | Number | '100%' | Chart width |
| showValues | Boolean | true | Show/hide value labels |
| animation | Boolean | true | Enable/disable animations |

#### useChartData Hook

```jsx
const { 
  data,          // Current chart data
  loading,       // Loading state
  error,         // Error state
  updateData,    // Function to update data
  fetchData      // Function to fetch data from API
} = useChartData(initialData);
```

## Examples

### Web Example

```jsx
import React from 'react';
import { BarChart, useChartData } from '@santosh9669/shared-chart-components';

function WebChart() {
  const { data, updateData } = useChartData([
    { label: 'Product A', value: 100 },
    { label: 'Product B', value: 200 },
    { label: 'Product C', value: 150 }
  ]);

  return (
    <BarChart 
      data={data}
      title="Product Sales"
      color="#4CAF50"
      height={300}
    />
  );
}
```

### React Native Example

```jsx
import React from 'react';
import { BarChart, useChartData } from '@santosh9669/shared-chart-components';

function NativeChart() {
  const { data, updateData } = useChartData([
    { label: 'Mon', value: 50 },
    { label: 'Tue', value: 80 },
    { label: 'Wed', value: 30 }
  ]);

  return (
    <BarChart 
      data={data}
      title="Daily Stats"
      color="#FF5722"
      height={250}
    />
  );
}
```

### Available Charts

This library currently includes the following chart types:

- **BarChart** - For comparing values across categories
- **LineChart** - For showing trends over time
- **PieChart** - For showing proportions of a whole
- **AreaChart** - For displaying cumulative data or ranges over time

### AreaChart Example

```jsx
// For Web
import { AreaChart } from '@your-username/shared-chart-components';

const data = [
  { x: 1, y: 10, label: 'Jan' },
  { x: 2, y: 25, label: 'Feb' },
  { x: 3, y: 15, label: 'Mar' },
  { x: 4, y: 30, label: 'Apr' },
  { x: 5, y: 22, label: 'May' },
  { x: 6, y: 40, label: 'Jun' }
];

function MyAreaChart() {
  return (
    <AreaChart
      data={data}
      title="Monthly Revenue"
      xAxisLabel="Month"
      yAxisLabel="Amount ($k)"
      color="#8884d8"
      gradient={true}
      showGrid={true}
      showTooltip={true}
      animation={true}
      theme="light"
      onPointClick={(point, index) => console.log(`Clicked point: ${point.label}`)}
    />
  );
}

// For React Native
import { NativeAreaChart } from '@your-username/shared-chart-components';

function MyNativeAreaChart() {
  return (
    <NativeAreaChart
      data={data}
      title="Monthly Revenue"
      color="#8884d8"
      showTooltip={true}
      animation={true}
    />
  );
}
```

#### AreaChart Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | Array | [] | Array of data points with x, y, and optional label properties |
| title | String | '' | Chart title |
| width | Number | 600 (web), screen width - 40 (native) | Chart width |
| height | Number | 400 (web), 350 (native) | Chart height |
| xAxisLabel | String | '' | Label for X axis |
| yAxisLabel | String | '' | Label for Y axis |
| color | String | '#3498db' | Primary chart color |
| gradient | Boolean | true | Whether to use gradient fill |
| showGrid | Boolean | true | Whether to show grid lines |
| showTooltip | Boolean | true | Whether to show tooltip on hover/press |
| showDots | Boolean | true | Whether to show data points |
| animation | Boolean | true | Whether to animate chart on load |
| theme | 'light' or 'dark' | 'light' | Chart color theme |
| onPointClick | Function | undefined | Callback when a point is clicked |

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © [santosh9669](https://github.com/santosh9669) 

## Advantages Over Other Chart Libraries

1. **Single Codebase for Multiple Platforms**: Most chart libraries either only support web or require completely different components for different platforms. Our library uses the same API structure for both React and React Native.

2. **Optimized for Each Platform**: Each implementation is optimized for its respective platform (DOM for web, react-native-svg for mobile).

3. **Modern Design**: Charts are designed with modern aesthetics and animations that work on both platforms.

4. **Lightweight**: Minimal dependencies and optimized bundle size.

5. **Customizable**: Extensive theming options and prop-based customization.

6. **Developer-Friendly**: Consistent API makes it easy to switch between platforms or share chart configuration.