React Chart Visualizer

Overview

This project is built using React, TypeScript, and Vite, with Chart.js for chart visualizations. It serves as a tool for visualizing data using interactive charts.

Features

• React: A JavaScript library for building user interfaces.
• TypeScript: Typed superset of JavaScript that provides static typing.
• Vite: A fast build tool for modern web projects.
• Chart.js: A powerful JavaScript library used to create beautiful charts.
• react-chartjs-2: React wrapper for Chart.js, making it easier to integrate charts within React components.

Setup

1. Clone the repository:

   https://github.com/WoongyuChoi/react-chart-visualizer.git

2. Navigate into the project directory:

   cd react-chart-visualizer

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. To build for production:

   npm run build

Usage

This project uses react-chartjs-2 to integrate Chart.js charts into React components. You can create various types of charts like bar, line, pie, and more.

Example of how to use a bar chart in the project:

import { Bar } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1,
    },
  ],
};

const options = {
  scales: {
    y: {
      beginAtZero: true,
    },
  },
};

export function BarChart() {
  return <Bar data={data} options={options} />;
}

License

This project is licensed under the MIT License.