Recharts如何将单位与数字对齐？答案

【问题标题】：Recharts how to alingn unit with number?Recharts如何将单位与数字对齐？
【发布时间】：2021-12-13 18:27:03
【问题描述】：

我正在尝试将单位 (MW) 与 y 中的数字对齐，但它们没有对齐，有人知道这样做的方法吗？

<ResponsiveContainer>
            <ComposedChart data={data?.data}>
              <XAxis
                ticks={[0, 60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720, 780, 840, 900, 960, 1020, 1080, 1140, 1200, 1260, 1320, 1380]}
                tick={{ fontSize: '12px' }}
                tickFormatter={tick => `${tick / 60}h`}
              />
              <YAxis
                type='number'
                tick={{ fontSize: '12px' }}
                tickCount={11}
                domain={[0, dataMax => Math.ceil(Number(dataMax) / 10000) * 10000]}
                tickFormatter={tick => `${Math.floor(tick).toLocaleString('pt-BR')}`}
                tickMargin={5}
                unit='  MW'
              />
              <CartesianGrid strokeDasharray='3' />
              <Tooltip content={CustomTooltip} />
              <Legend verticalAlign='top' content={CustomLegend} />
              {charts.areas.map(chart => (
                <Area name={chart.name} dataKey={chart.dataKey} stroke={chart.stroke} stackId={chart.stackId} fill={chart.fill} dot={false} strokeWidth={0} fillOpacity={1} type='monotone' />
              ))}
              {charts.lines.map(chart => (
                <Line name={chart.name} dataKey={chart.dataKey} stroke={chart.stroke} dot={false} strokeWidth={2} />
              ))}
            </ComposedChart>
          </ResponsiveContainer>
        )}
      </ChartContainer>

【问题讨论】：

标签： reactjs typescript react-typescript recharts

【解决方案1】：

默认 y 轴大小为 60。
您应该使用width 属性正确显示值

<YAxis
  type='number'
  tick={{ fontSize: '12px' }}
  tickCount={11}
  domain={[0, dataMax => Math.ceil(Number(dataMax) / 10000) * 10000]}
  tickFormatter={tick => `${Math.floor(tick).toLocaleString('pt-BR')}`}
  tickMargin={5}
  unit='  MW'
  width={100}
/>

【讨论】：