防止 Recharts Y 轴标签换行答案

【问题标题】：Prevent Recharts Y-axis labels from wrapping防止 Recharts Y 轴标签换行
【发布时间】：2021-12-13 20:40:15
【问题描述】：

目前我的图表标签正在换行，我想指定一个宽度，以便它们仅在超过该宽度时才换行。现在每个单词都是一个单独的行，这不是我想要的行为。

<BarChartWrapper>
        <BarChart
        layout="vertical"
        width={668}
        height={248}
        barCategoryGap={20}
        data={data}
        margin={{ top: 0, right: 50, bottom: 0, left: 50 }}
      >
        <CartesianGrid strokeDasharray="5" horizontal={false} stroke="#E7E7E7" />
        <XAxis
          label="(%)"
          // can also pass in a react component label={<CustomizedLabel />}
          tickLine={false}
          tickMargin={10}
          type="number"
          domain={[0, 90]}
        />
        {/* domain is max gonna be the max agreement + 10*/}
        <YAxis
          tick={{fontSize: 10, color: Colors.gray2}}
          tickLine={false}
          tickMargin={20}
          dataKey="name"
          type="category"
        />
        <Tooltip />
        <Bar dataKey="uv" barSize={24} fill="#009BAB" radius={[0, 4, 4, 0]} />
      </BarChart>
        </BarChartWrapper>

enter image description here

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

很遗憾，Recharts YAxis tick 没有用于自定义tick 属性的whiteSpace 属性，但您可以使用width 属性更改YAxis 宽度以增强文本换行问题：

<YAxis
  tick={{fontSize: 10, color: Colors.gray2}}
  tickLine={false}
  tickMargin={20}
  dataKey="name"
  type="category"
  width={300}     // ----> here
/>

默认width 值为60。有关 rechart 的更多信息documentation。

【讨论】：