How to have Labels for Bar Chart on the Bar End ?

[jiaulislam]

I'm trying to have the Horizontal Bar labels on the top of the each bar. So Bar I got below results. How can I make those labels appear at the top of the each bar dynamically ?

TIA

Custom Label Component

const CustomizedLabel: FC<CustomizedLabelProps> = ({
  x = 310,
  y = 199,
  fill = TICK_COLOR,
  value = 0,
}) => {
  return (
    <Text
      x={x}
      y={y}
      dx={200}
      fontSize="16"
      fontFamily="sans-serif"
      fill={fill}
      textAnchor="middle"
      verticalAnchor="middle"
    >
      {numberToMillionsString(value, true)}
    </Text>
  );
};

[jiaulislam]

actually solved it easlily with LabelList component. Just had to use the position=right then voila it's done.

      <Bar
        dataKey={option.valueKey}
        fill={option.fill}
        legendType="line"
        barSize={12}
        activeBar={<Rectangle fill={option.fill} stroke={option.stroke} />}
      >
        {option?.barLabel ? (
          <LabelList
            position="right"
            dataKey={option.valueKey}
            formatter={(value: string) => `${findRatio(value, totalAmount)}%`}
          />
        ) : (
          ""
        )}
      </Bar>