'use client'

​

import { Bar, BarChart, CartesianGrid, Cell, LabelList, XAxis } from 'recharts'

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

​

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

    const colors = ['#008000', '#FFFF00', '#000000', '#FF0000'];

​

    return (

        <ChartContainer config={chartConfig}>

            <BarChart

                accessibilityLayer

                data={chartData}

                margin={{

                    top: 20,

                }}

            >

                <CartesianGrid vertical={false} />

                <XAxis dataKey="key" tickLine={false} tickMargin={10} axisLine={false} />

                <ChartTooltip cursor={false} content={<ChartTooltipContent />} />

                <Bar dataKey="value" fill="var(--color-key)" radius={8}>

                    <LabelList

                        position="top"

                        offset={12}

                        className="fill-foreground hidden"

                        fontSize={12}

                        //add a thousand separator to the value

                        formatter={value => value.toLocaleString()}

                    />

                     {chartData.map((entry, index) => (

                        <Cell key={`cell-${index}`} fill={colors[index % colors.length]} /> // Assign color based on index

                    ))}

                </Bar>

            </BarChart>

        </ChartContainer>

    )

}

​

<Pie

  data={data} 

  cx={120} 

  cy={200} 

  innerRadius={60}

  outerRadius={80} 

  fill="#8884d8"

  paddingAngle={5}

>

  {

    data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)

  }

</Pie>