https://github.com/frnt-end/data-visualization-chartjs-react-typescript

⚡ React / Vite and Typescript Data Visualization App- Fetch Api data and display it in a chart and a table - using axios. chartjs, MUI and styled components. Watch DEMO => https://Frnt-End.github.io/Data-Visualization-Chartjs-React-Typescript 👈
https://github.com/frnt-end/data-visualization-chartjs-react-typescript

api axios chart chartjs data-visualization design gh-pages mui react reactjs styled-components table typescript ui ux vite

Last synced: 28 days ago
JSON representation

⚡ React / Vite and Typescript Data Visualization App- Fetch Api data and display it in a chart and a table - using axios. chartjs, MUI and styled components. Watch DEMO => https://Frnt-End.github.io/Data-Visualization-Chartjs-React-Typescript 👈

• Host: GitHub
• URL: https://github.com/frnt-end/data-visualization-chartjs-react-typescript
• Owner: Frnt-End
• Created: 2023-08-13T19:21:12.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-03-30T21:31:28.000Z (about 1 month ago)
• Last Synced: 2025-03-30T22:26:29.192Z (about 1 month ago)
• Topics: api, axios, chart, chartjs, data-visualization, design, gh-pages, mui, react, reactjs, styled-components, table, typescript, ui, ux, vite
• Language: TypeScript
• Homepage: https://frnt-end.github.io/Data-Visualization-Chartjs-React-Typescript/
• Size: 32.9 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Data Visualization API - Chart & Table

Implementing an Data Visualization using Chart.js.

👉 [Watch DEMO](https://Frnt-End.github.io/Data-Visualization-Chartjs-React-Typescript)

![Data Visualization API](src/ui-prev-white.jpg "Data Visualization API")

### Project Details

- Fetch API data and display bar chart and table.

- the chart contain a filter menu to select a range of years to be displayed in the chart.

- The table contain pagination.

### Technologies

- React & Vite.

- Chart.js.

- Axios.

- TypeScript.

- MUI + Styled Components.

## Run project

Install all the dependencies used in this project:

`npm install`

In the project directory, you can run:

`npm run dev`

Runs the app in the development mode.\

Open [http://127.0.0.1:5173/](http://127.0.0.1:5173/) to view it in the browser.