Customize ReChart bar chart labels and colors for each Bar-CodePudding

I have a rechart bar chart that I would like to have the Labels like this...

And I want the colors to be like this...

The problem is that I can't seem to get them both at the same time. The second image is the closest I can get but it is bringing in the value instead of the name hence the int(85) instead of string(85%) and it is also not angles.

Here is my code. I commented out the part that allows for angled labels because it wont work when is there..

import { BarChart, Bar, LabelList, Cell } from "recharts";
import { colors } from "../../Colors/colors";

const data = [
  {
    name: `${85}%`,
    uv: 85,
  },
  {
    name: `${95}%`,
    uv: 95,
  },
  {
    name: `${80}%`,
    uv: 80,
  },
];
export default function MyBarChart(): JSX.Element {
  return (
    <BarChart width={150} height={400} data={data}>
      <Bar
        dataKey="uv"
        fill={colors.blueTheme[0]}
        radius={8}
        label={{ position: "insideBottom", fill: "black" }}
        name="name"
      >
        {/* <LabelList
          dataKey="name"
          position="insideBottom"
          angle={270}
          offset={25}
        /> */}
        {colors.blueTheme.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={colors.blueTheme[index % 20]} />
        ))}
      </Bar>
    </BarChart>
  );
}

The colors.tsx

export const colors = {
  blueTheme: ["#85A5FF", "#ADC6FF", "#D6E4FF"],
};

How can I get the angled labels with the color differences simultaneously?

CodePudding user response：

I figured it out...

<BarChart width={150} height={400} data={data}>
  <Bar dataKey="uv" radius={8}>
    <LabelList
      dataKey="name"
      position="insideBottom"
      angle={270}
      offset={25}
      fill="black"
    />
    {colors.blueTheme.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={colors.blueTheme[index % 20]} />
    ))}
  </Bar>
</BarChart>

CodePudding user response：

If you update the data and add the color each bar needs to have, as follows:

  const data = [
  {
    name: `${85}%`,
    uv: 85,
    color: "#85A5FF" // you may pass a value directly as string
  },
  {
    name: `${95}%`,
    uv: 95,
    color: colors.blueTheme[1]  // or colors.blueTheme by index
  },
  {
    name: `${80}%`,
    uv: 80,
    color: colors.blueTheme[getIndex()]  // or some custom logic to evaluate index
  },
];

You can update the code as follows and it will work:

export default function MyBarChart(): JSX.Element {
  return (
    <BarChart width={300} height={400} data={data}>
    <Bar
      dataKey="uv"
      fill="#85A5FF"
      radius={8}
      label={{
        position: "insideBottom",
        angle: -60,
        fill: "black",
        offset: 25
      }}
    >
      <LabelList dataKey="name" />
      {data.map((entry, index) => (
        <Cell fill={entry.color} key={`cell-${index}`} />
      ))}
    </Bar>
  </BarChart>
  );
}

Working example: https://codesandbox.io/embed/bar-chart-with-customized-event-forked-4ygf7i?fontsize=14&hidenavigation=1&theme=dark