React-chart-dev NPM

Here’s the updated README.md file for your chart library, react-chart-dev:

React Chart Dev

A powerful and flexible charting library built with D3.js and react-native-svg, designed specifically for React Native applications. Easily create stunning, interactive charts with minimal configuration.

Features

Multiple Chart Types: Includes Bar, Line, and Pie charts, with the flexibility to add more.
Fully Customizable: Control the appearance and behavior of your charts.
Responsive Design: Automatically adjusts to fit the screen size.
Easy Integration: Simple to include in any React Native project.

Installation

To install this library, run the following command in your React Native project:

pnpm add react-chart-dev react-native-svg d3

Make sure react-native-svg is linked properly. For React Native versions 0.60 and above, it will link automatically.

Usage

Here’s how to use the charts in your application:

Bar Chart Example

import React from "react";
import { View } from "react-native";
import { BarChart } from "react-chart-dev";

const data = [
  { label: "Jan", value: 30 },
  { label: "Feb", value: 50 },
  { label: "Mar", value: 20 },
  { label: "Apr", value: 80 },
];

const MyBarChart = () => (
  <View style={{ flex: 1 }}>
    <BarChart data={data} width={300} height={200} />
  </View>
);

export default MyBarChart;

Line Chart Example

import React from "react";
import { View } from "react-native";
import { LineChart } from "react-chart-dev";

const data = [
  { label: "Week 1", value: 20 },
  { label: "Week 2", value: 50 },
  { label: "Week 3", value: 75 },
  { label: "Week 4", value: 100 },
];

const MyLineChart = () => (
  <View style={{ flex: 1 }}>
    <LineChart data={data} width={350} height={200} />
  </View>
);

export default MyLineChart;

Pie Chart Example

import React from "react";
import { View } from "react-native";
import { PieChart } from "react-chart-dev";

const data = [
  { label: "Apples", value: 40 },
  { label: "Bananas", value: 25 },
  { label: "Cherries", value: 35 },
];

const MyPieChart = () => (
  <View style={{ flex: 1 }}>
    <PieChart data={data} width={300} height={300} />
  </View>
);

export default MyPieChart;

API Reference

BarChart

Prop	Type	Default	Description
`data`	`Array`	`[]`	Data to display in the bar chart.
`width`	`Number`	`300`	Width of the chart in pixels.
`height`	`Number`	`200`	Height of the chart in pixels.
`color`	`String`	`#3498db`	Color of the bars.
`padding`	`Object`	`{ top: 10, right: 10, bottom: 10, left: 10 }`	Padding around the chart.
`showAxes`	`Boolean`	`true`	Whether to display axes on the chart.

LineChart

Prop	Type	Default	Description
`data`	`Array`	`[]`	Data to display in the line chart.
`width`	`Number`	`350`	Width of the chart in pixels.
`height`	`Number`	`200`	Height of the chart in pixels.
`strokeWidth`	`Number`	`2`	Thickness of the line.
`color`	`String`	`#2ecc71`	Color of the line.

PieChart

Prop	Type	Default	Description
`data`	`Array`	`[]`	Data to display in the pie chart.
`width`	`Number`	`300`	Width of the chart in pixels.
`height`	`Number`	`300`	Height of the chart in pixels.
`colors`	`Array`	`[]`	Array of colors for each pie slice.

Customization

Hooks

useD3(): A hook providing access to D3 functionalities for the chart.
useChartData(): Manages and formats the input data for the chart.
useChartSettings(): Manages chart settings such as dimensions and colors.

Utility Functions

dataProcessing.js: Utilities for transforming and preparing data for charts.
scales.js: Functions to create scales for your charts.
axes.js: Functions to create and customize chart axes.

Examples

Explore example projects and demos in the examples/ directory to see how to integrate multiple charts into a dashboard or use them individually.

Running Examples

Clone the repository and navigate to the examples/ directory.
Install dependencies using:
```
pnpm install
```

Run the example app:

react-native run-android
# or
react-native run-ios

Roadmap

Add support for additional chart types (e.g., Scatter Plot, Area Chart).
Implement animations and transitions for dynamic chart behavior.
Introduce user interactions like tooltips and zooming.

Contributing

Contributions are welcome! To contribute:

Fork the repository.
Create a new branch: git checkout -b feature/your-feature.
Make your changes and commit them: git commit -m 'Add some feature'.
Push to the branch: git push origin feature/your-feature.
Create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Feel free to adjust any sections to better fit your library's specific features and usage patterns. This README.md is structured to be informative and user-friendly, ensuring that users can easily understand how to utilize and contribute to react-chart-dev.