https://github.com/jubinjacob03/pisense-frontend_reactjs_apexcharts
Frontend webpage using ReactJS which takes data from a JSON file and visualizes the data using ApexChart library
https://github.com/jubinjacob03/pisense-frontend_reactjs_apexcharts
apexcharts css frontend javascript reatctjs
Last synced: 3 months ago
JSON representation
Frontend webpage using ReactJS which takes data from a JSON file and visualizes the data using ApexChart library
- Host: GitHub
- URL: https://github.com/jubinjacob03/pisense-frontend_reactjs_apexcharts
- Owner: jubinjacob03
- License: mit
- Created: 2023-07-27T12:45:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-27T18:08:31.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T12:41:35.728Z (4 months ago)
- Topics: apexcharts, css, frontend, javascript, reatctjs
- Language: JavaScript
- Homepage:
- Size: 174 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pisense-Frontend_ReactJS_ApexCharts
This is a FrontEnd webpage developed using ReactJS and CSS, which reads data from a JSON file and visualizes the data using ApexCharts.
# Setup
- Clone this repository using git.
- Yarn must be installed, and working path privilege should be pre-authorized.
- Install all required dependencies by typing the command - yarn.
- Now a node_modules folder will be generated, proceed after that file is built.
# Running the Project
- In the IDE's Terminal, type the command - yarn start, to start the server.
- Default browser will open Localhost port automatically, if not opened; Open any browser and go to http://localhost:3000/
- The website will be now live.
# Output
https://github.com/jubinjacob03/Pisense-Frontend_ReactJS_ApexCharts/assets/118928433/b216a5db-ca3e-44c0-ad4c-35c81ccad331
# References
- Apex Charts - [installation](https://apexcharts.com/docs/installation/) , different types of [charts](https://apexcharts.com/react-chart-demos/) available in Apex Charts for React.
- Yarn installation [Docs](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable).
- [React unicons](https://iconscout.com/unicons/explore/line)