CategoryBar values is not filling in the bar

[SamX23]

So I'm using CategoryBar component, but the value is not fully filling in the bar, there is a gap if I use values under a hundred,
for example, if the value is [38, 17], there will be a cap that looks like this screenshot.

I'm using the latest version, which is 3.10.0.
If I look carefully, the value is converted to width value, that is what makes it looks like fully wide, because of the width value

Any suggestion? thank you

[SamX23]

Sorry, so silly of me

I should have realized that it was a percentage, so what I did was use this code to convert the values

const totalUser = 38 + 17;
const firstValue = Math.round((38  / totalUser) * 100);
const secondValue = Math.round((17 / totalUser) * 100);
const values = [firstValue, secondValue];

I hope this helps others, cheers

[russ0133]

Hey, I can not get this to work properly. Do you mind helping me?

Code is pretty simple and self explanatory, there's a value and there's a target. I understand it's a percentage but not sure how I would approach this.

const Task = ({
  task,
  value,
  target,
}: {
  task: string;
  value: number;
  target: number;
}) => {
  return (
    <Card>
      <Stack gap={2}>
        <Stack
          alignItems={"center"}
          justifyContent={"space-between"}
          direction="row"
        >
          <Text>{task}</Text>
          <TaskTag type={"ongoing"} />
        </Stack>

        <CategoryBar
          tooltip={value?.toFixed(0)}
          values={[25, 25, 25, 25]}
          showLabels={true}
          colors={["yellow", "orange", "orange", "emerald"]}
          markerValue={value}
          className="mt-3"
        />

        <HStack mt={2}>
          <Avatar
            size={"sm"}
            src={
              "https://images.unsplash.com/photo-1619946794135-5bc917a27793?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9"
            }
          />
          <div className="text-lightGray">John Doe</div>
        </HStack>
      </Stack>
    </Card>
  );
};

          <Task
            task="Import 50 processes"
            value={processes.data?.length ?? 0}
            target={50}
          />

In my case I'm CategoryBar to have a progress bar with color stops with a target. Here's how it looks like in the provided component:

Which obviously isn't correct since 50 would be the target and 40 is the actual value.

[SamX23]

Hi,

You want to show progress correct? try using the ProgressBar component instead of CategoryBar, because it seems you only have 1 value.

https://www.tremor.so/docs/visualizations/data-bars