@santosh9669/shared-chart-components v1.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:

// 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

# 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

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

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

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

useChartData Hook

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

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

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

// 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

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © 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.