This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Components Created

To view the custom components, please look under 'components' folder. There you will find an additional folder named 'charts' which contains the components that render the chart and tooltips.

• Header - consists of the header and brief description of the project
• InputFields - consists of the two numerical input fields, initial and monthly investment
• CourseLineChart - fetches the data from API and converts data into suitable format to be rendered by from recharts library
• ToolTipLabels - dynamically renders the ToolTip when hovering over the chart
• ToolTipTitle - formats and centralizes titles within the ToolTip
• Dot - Dynamically renders dots according to the colour of the metric being represented

Third-Party Libraries Used

• react-bootstrap
• recharts