$ env1/bin/pip freeze > requirements.txt

$ env2/bin/pip install -r requirements.txt

​

'use client'

​

import { RadialBar, RadialBarChart, LabelList } from 'recharts'

​

import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'

​

export default function Component({ chartData, chartConfig }) {

    const formattedChartData = Object.keys(chartData).map((key) => ({

        key: chartData[key].key,   

        value: chartData[key].value 

    }));

​

    console.log('formatted data', formattedChartData)

​

    return (

        <ChartContainer config={chartConfig} className="mx-auto max-sm:aspect-square">

            <RadialBarChart

                accessibilityLayer

                data={formattedChartData}

                innerRadius={30}

                outerRadius={110}

            >

                <ChartTooltip

                    content={<ChartTooltipContent />}

                    formatter={(value, key) => [`${key} -`, ` ${value}`]} // Display value and key (key) correctly

                    labelFormatter={(label, payload) => {

                        // Access the key directly from the payload

                        const dataPoint = payload?.[0]?.payload; // Get the data point from payload

                        if (dataPoint) {

                            return `${dataPoint.key}`; // Return formatted label

                        }

                        return label; // Fallback to default label if not available

                    }}

                />

                <RadialBar dataKey="value" nameKey="key" background />

            </RadialBarChart>

        </ChartContainer>

    )

}

​