如果标签太长，如何设置 YAxis recharts 的样式以使其省略？答案

【问题标题】：How to style YAxis recharts to make it ellipsis if label too long?如果标签太长，如何设置 YAxis recharts 的样式以使其省略？
【发布时间】：2021-06-12 14:56:11
【问题描述】：

规格：

Recharts 版本：2.0.9
ReactJS 版本：17.0.2
浏览器：Chrome 版本 91.0.4472.77（官方构建）(x86_64)
操作系统：MacOS

背景：

我正在尝试使用recharts 包来创建图表。我非常接近我的目标。但是，如果标签太长，我会坚持设置 YAxis 标签的样式以使其省略。

现状：

如您所见，它与其他数据重叠。我知道我可以使字体大小更小或将宽度设置得更大。但是，问题是，YAxis 标签是动态的，它可能很长。这是当前代码https://codesandbox.io/s/simple-bar-chart-forked-72z60?file=/src/App.tsx

目标：

我想让 YAxis 标签显示“This is long label and...”（如果太长则显示三个点），有点像使用省略号。

顺便说一句，我和这个问题Dynamic height for Recharts horizontal barchart with long labels in YAxis有同样的问题。您可以将其标记为重复，但也请帮助我。那些问题仍然没有被接受的答案。

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

您可以使用YAxis 道具、tickFormatter 之一来实现它。这个道具返回每个YAxis 值和它的索引。此外，这个道具需要一个字符串作为返回值，它是格式化的 YAxis 标签。这个想法是这样的：

tickFormatter = (value: string, index: number) => {
   const limit = 20; // put your maximum character
   if (value.length < limit) return value;
   return `${value.substring(0, limit)}...`;
};

<YAxis
   width={150}
   tickFormatter={tickFormatter}
/>

【讨论】：