Fix Interactive Chart in Flask Web App

Job ID: 39405122

Budget: £20 – £250 GBP

I've tried to build a Flask web app (I'm not very experienced). It's a simple radial chart which takes input data from an excel sheet and displays traffic light colours. It should also be interactive, displaying some text when hovering over different segments of the chart.

See my github repo (https://github.com/MF-Jonez/PipelineStatus.git) - the master branch shows how the chart should look. However, the master branch is not displaying the labels properly (there should be labels inside the circle gap as well as labels around the circumference).

The 'test' branch shows the chart with the labels displaying, but the whole chart is now misaligned.

I need to reconcile these two versions so that the chart displays as follows:
- radial chart displayed in centre of screen
- A/B/C... labels displayed inside the circle gap
- PL1/PL2/PL3... labels displayed around the circumference
- Scrolling disabled (i.e. chart displays like a dashboard)
- Legend shown at the side (this is already working correctly)
- Hole in the middle of the chart is small, i.e. the chart is scaled properly radially (this is displaying correctly in the master branch, but not in the test branch)
- And finally, make each segment of the chart interactable (e.g. i can hover over one segment and it should display some pop up text from the relevant cell in the excel sheet, e.g. "amber test")

The app uses: python with packages: matplotlib, flask, pycirclize, mpld3
As well as: html, css & javascript for the front end
Related categories: JavaScript Python CSS HTML Flask