Create legend for Gender Ratio Chart (screens < 600px)

[mithintv]

Issue Summary

Currently on screen sizes under 600px, the gender ratio chart labels get cut off. Due to the nature of how the labels will be arbitrarily positioned around the pie chart, I think the best solution is to create a legend of the colors and the data values in the top right corner of this graph. For screen sizes greater than 600px, we can keep the chart as is given the increased space. This issue may require some tinkering with the Recharts library.

Tasks

• Create legend component for male, female, and non-binary data values that will be output to the chart
• Have legend display category name (male, female, non-binary),
• Have legend display color of respective category
• Have legend display percentage value of category
• Position legend to be in the top right corner of gender chart for screens smaller than 600px