My Chart Project

A React application for visualizing spending data using interactive charts. This project is part of a MERN stack application focused on financial data visualization.

Features

• Interactive spending charts
• Built with React and Vite
• Uses Recharts library for data visualization
• Modern development setup with ESLint

Tech Stack

• Frontend: React 19
• Build Tool: Vite
• Charts: Recharts
• Linting: ESLint

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd my-chart-project

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Project Structure

src/
├── components/
│   └── spendingCharts.jsx    # Main chart component
├── data/
│   └── chartData.js          # Sample spending data
├── App.jsx                   # Main app component
└── main.jsx                  # App entry point

Data

The application uses sample spending data categorized by:

• Rent
• Groceries
• Utilities
• Entertainment
• Transport

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request