Allow legend to the side of Donut chart, not only in tooltip

[Toshinaki]

To be honest, showing the detail of the donut chart on hover, and covers almost all of the chart itself not seem very useful.

It would be great if we could control this behavior with for example:

legendMode: "hover" | "side";
legendOrientation: "top" | "left" | "bottom" | "right" // or more like top-right, center-right

Also, hover on the legend makes the corresponding bars highlight would look great in donut chart too.

[lascaps]

Hey, I haven't worked much with Mantine and React yet. I'm currently tinkering with a private hobby project and experimenting with Remix and Mantine. I found the following solution that works for me. Since Mantine charts are based on Recharts, I use the Legend component from Recharts.

I hope this helps you a bit.

import {DonutChart} from '@mantine/charts';
import React from "react";
import {Legend} from "recharts";

export const data = [
    {name: 'USA', value: 400, color: 'indigo.6'},
    {name: 'India', value: 300, color: 'yellow.6'},
    {name: 'Japan', value: 100, color: 'teal.6'},
    {name: 'Other', value: 200, color: 'gray.6'},
];

export default function route() {
    return (
        <>
            <DonutChart withLabelsLine withLabels data={data}>
                <Legend
                    verticalAlign="bottom" height={36}/>
            </DonutChart>
        </>
    );
}