rechart - assign different colors to chart

Doyin Atobaru answered on March 10, 2022 Popularity 4/10 Helpfulness 1/10

answer rechart - assign different colors to chart

related recharts pie chart different colors

rechart - assign different colors to chart

Comment

'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>
    )
}

Popularity 4/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: assign colors whatever

Link to this answer
Share Copy Link

Contributed on Oct 09 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

recharts pie chart different colors

Comment

<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>

Popularity 8/10 Helpfulness 6/10 Language typescript

Source: github.com

Tags: recharts pie-chart colors typescript pie-ch

Link to this answer
Share Copy Link

Contributed on Mar 10 2022

GutoTrosla

0 Answers Avg Quality 2/10

rechart - assign different colors to chart

Contents

More Related Answers

rechart - assign different colors to chart

Closely Related Answers

recharts pie chart different colors

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.