I have the code here using react, tailwind, and Recharts. I have a custom legend component that is generated in the renderLenged() function. I want to position the legend entries vertically and have them showing on the right side of the pie chart in the middle. I've tried to add absolute positioning to the renderLegend component, but it pushes the legend outside of the ResponsiveContainer and I have to use negative positioning IE T-[-250px] R-[-20px] on the renderLegend component to bring it back into proper positioning which is something I don't want to rely on. How would I go about fixing this? Right now the legend is on the bottom and horizontal. Thanks
As explained, I tried to add absolute positioning to the <renderLegend /> component, but it pushed the legend outside of the chart container. Also tried to mess with the various props that <Legend /> component has such as VerticalAlign="middle" but was not able to get it to work and it displaces the pie chart. I want to see if we can somehow use absolute positioning properly without relying on negative positioning to get the end result.