Improve mobile view for piechart legend

[MignonErasmus]

Description

The pie chart legend should be at the bottom of the chart on mobile view, otherwise it should be to the right of the chart.

Changes Made

The pie chart legend should be at the bottom of the chart on mobile view, otherwise it should be to the right of the chart.

Screenshots (if applicable)

Instead of this:

To this:

Related Issues

178

Checklist

• [x] I have tested this code locally
• [x] I have reviewed the code for readability and maintainability
• [ ] I have added appropriate documentation or updated existing documentation
• [x] I have ensured that my changes follow the project's coding conventions
• [ ] I have performed additional steps, if required [e.g., database migrations, configuration changes, etc.]

Additional Notes

[Include any additional notes or context relevant to the pull request]

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 87.21%. Comparing base (b9d3577) to head (bec76e0).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## development #181 +/- ## ============================================ Coverage 87.21% 87.21% ============================================ Files 39 39 Lines 1134 1134 Branches 245 242 -3 ============================================ Hits 989 989 - Misses 139 142 +3 + Partials 6 3 -3 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.