shadcn 图表标签和值之间没有空格

Question

我面临的问题可以在图像上看到，本质上一些更大的值在值和标签之间没有任何填充，我想知道如何使其至少 2px

图片：

部分代码：

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

Answer 1

看起来 Shadcn 目前不允许您通过道具进行自定义。您可以通过 className 属性在 ChartTooltip 上设置最小宽度来解决此问题，但这并不理想。但是，由于 Shadcn 需要进行调整，因此您可以通过在指标位后面添加间隙 2 类名或类似内容来修改原始 ChartTooltipConten 组件

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

或者将其作为可以传递给组件的道具。