时间戳

首页 > 解决方案 > 防止 Recharts Y 轴标签换行

reactjs - 防止 Recharts Y 轴标签换行

问题描述

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

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

在此处输入图像描述

标签： reactjsrecharts

解决方案

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

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

默认width值为60。有关重新图表文档的更多信息。

推荐阅读