Dynamic Chart Visualization App

This is a React application that allows users to visualize data using various chart types. It provides features for customizing the data source, chart appearance, and exporting the charts.

Features

• Multiple Chart Types: Supports Line, Bar, Area, and Pie charts. Users can easily switch between chart types using toggle buttons.
• Dynamic Data Loading: Users can upload their own data in JSON format. The application parses the JSON file and updates the charts accordingly. A sample JSON file (public/test_data.json) is provided to show the expected structure.
• Color Customization: Users can change the color for each dataset using interactive color pickers. These colors are reflected in the chart visualization and legend. The JSON data format also supports an optional color property for each dataset.
• Chart Download: Users can download the currently displayed chart as a PNG image file using the "Download Chart" button.
• Interactive Legend: The chart legend is interactive. Clicking on a legend item toggles the visibility of the corresponding dataset in the chart. Hovering over a legend item highlights the corresponding dataset.
• Tooltips: Hovering over data points or chart segments displays a tooltip with detailed information.

JSON Data Structure

The application expects a JSON file with the following structure:

{
  "dataSets": [
    {
      "name": "Dataset 1 Name",
      "data": [
        /* array of numerical data points */
      ],
      "color": "#RRGGBB" // Optional: Hex color code for this dataset
    },
    {
      "name": "Dataset 2 Name",
      "data": [
        /* array of numerical data points */
      ],
      "color": "#RRGGBB" // Optional
    }
    // ... more datasets
  ],
  "labels": [
    /* array of string labels for the X-axis */
  ]
}

• dataSets: An array of objects, where each object represents a dataset to be plotted.
  • name: The name of the dataset (string), displayed in the legend and tooltips.
  • data: An array of numerical values representing the data points for this dataset.
  • color (Optional): A string representing the color for this dataset in hex format (e.g., "#FF6F61"). If not provided, a default color will be assigned.
• labels: An array of strings representing the labels for the X-axis (e.g., months, categories). This is used for Line, Bar, and Area charts.

See public/test_data.json for a working example.

Getting Started

This project was bootstrapped with Create React App.

Prerequisites

• Node.js and npm (or yarn) installed on your machine.

Installation

1. Clone the repository (or download the source code).
2. Navigate to the project directory in your terminal.
3. Install the dependencies:

   npm install
   # or
   yarn install
   
   

Running the Application

1. Start the development server:

   npm start
   # or
   yarn start
   
   

2. Open http://localhost:3000 (or the port specified in the output) in your web browser.

Available Scripts

In the project directory, you can run:

• npm start / yarn start: Runs the app in development mode.
• npm test / yarn test: Launches the test runner.
• npm run build / yarn build: Builds the app for production.
• npm run eject / yarn eject: Ejects from Create React App configuration (use with caution).

node: the app is without any external chart packages only with SVG

Features

• Multiple Chart Types: Supports Line, Bar, Area, and Pie charts. Users can easily switch between chart types using toggle buttons.
• Dynamic Data Loading: Users can upload their own data in JSON format. The application parses the JSON file and updates the charts accordingly. A sample JSON file (public/test_data.json) is provided to show the expected structure.
• Color Customization: Users can change the color for each dataset using interactive color pickers. These colors are reflected in the chart visualization and legend. The JSON data format also supports an optional color property for each dataset.
• Chart Download: Users can download the currently displayed chart as a PNG image file using the "Download Chart" button.
• Interactive Legend: The chart legend is interactive. Clicking on a legend item toggles the visibility of the corresponding dataset in the chart. Hovering over a legend item highlights the corresponding dataset.
• Tooltips: Hovering over data points or chart segments displays a tooltip with detailed information.

Node.js and npm (or yarn) installed.

Download the source code.
Install dependencies using npm install or yarn install.
Run the development server using npm start or yarn start.
Open http://localhost:3000 In your web browser.

Getting Started

This project was bootstrapped with Create React App.

Prerequisites

• Node.js and npm (or yarn) are installed on your machine.

Installation

1. Clone the repository (or download the source code).
2. Navigate to the project directory in your terminal.
3. Install the dependencies:

   npm install
   # or
   yarn install
   
   

Running the Application

1. Start the development server:

   npm start
   # or
   yarn start
   
   

2. Open http://localhost:3000 (or the port specified in the output) in your web browser.