Search code examples
javascriptreactjsjsxrecharts

shadcn chart has no space between label and value

The issue I'm facing can be seen on the image, essentially some bigger values don't have any padding in between value and label, I'd like to know how I can make it at least 2px

Image:

enter image description here

Part of code:

    <ChartTooltip
      cursor={false}
      content={
        <ChartTooltipContent
          labelFormatter={(value) => {
            return new Date(value).toLocaleDateString("en-US", {
              month: "short",
              day: "numeric",
            });
          }}
          indicator="line"
        />
      }
    />
Solution

  • Looks like this is something Shadcn doesn't currently let you customize via props. You could solve it by setting a min width on the ChartTooltip via the className prop, but that is not ideal. However, since Shadcn is meant to be tweaked you can modify the raw ChartTooltipContent component by adding a gap-2 className or similar at the end after the indicator bit

    <div
  className={cn(
    'flex flex-1 justify-between leading-none gap-2', // <-- add gap-2 here
    nestLabel ? 'items-end' : 'items-center'
  )}
>
  <div className="grid gap-1.5">
    {nestLabel ? tooltipLabel : null}
    <span className="text-muted-foreground">
      {itemConfig?.label || item.name}
    </span>
  </div>
  {item.value && (
    <span className="font-mono font-medium tabular-nums text-foreground">
      {item.value.toLocaleString()}
    </span>
  )}
</div>

    Or make this a prop you can pass through to the component.