在 react rechart 中调整大小后 xAxis 隐藏

Question

我使用 React Rechart 库来创建折线图。当我调整浏览器大小时 window，xAxis 中的值或刻度被隐藏。但我不想隐藏 xAxis 中的值。请提供一个解决方案，以避免 xAxis 中的值被隐藏。

我的折线图组件代码

import React from 'react'
import {
  LineChart, Line, XAxis, YAxis, ResponsiveContainer, CartesianGrid, Tooltip, Legend, ReferenceLine,
} from 'recharts';
import { lineChartXAxis, lineChartYAxis } from './chart.config';
// styles
import useStyles from "./styles";

const LineCharts = ({ dimensions, data, XAxisDataKey }) => {
    const {chartOuterWrap, chartInnerWrap} = useStyles()
    return ( 
        <div className={chartOuterWrap} style={dimensions}>
          <div className={chartInnerWrap}>
            <ResponsiveContainer>
              <LineChart height={'100%'} width={'100%'} data={data}>
                  <XAxis dataKey={XAxisDataKey}
                  tick={true}
                  interval={'preserveStartEnd'}
                  {...lineChartXAxis}
                  />
                  <YAxis
                  interval={0}
                  tick={true}
                  {...lineChartYAxis}
                   />
                  <Tooltip />
                  <Line type="monotone" strokeWidth={3} dataKey="uv" stroke="#24b32a" />
                  <Line type="monotone" strokeWidth={3} dataKey="pv" stroke="#fb8c00" />
                  <Line type="monotone" strokeWidth={3} dataKey="amt" stroke="#e53935" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
    );
}

export default LineCharts;

为了便于理解问题，我还附上了图片

调整大小后 window

Answer 1

这是一个带有 Recharts 的 known bug，解决方法是使用自定义刻度线：

const CustomizedAxisTick = props => {
  const { x, y, payload } = props

  return (
    <g transform={\`translate(${x},${y})\`}>
      <text dy={16} textAnchor='middle' fill='#666'>{payload.value}</text>
    </g>
  )
}

然后在图表类型 AreaChart、BarChart、LineChart、ComposedChart 或 ScatterChart 中，在 XAxis

中包含 tick 属性

<XAxis tick={<CustomizedAxisTick />} />

像这样CustomizedLabelLineChart example. Experiment with settings in this codesandbox.

在 react rechart 中调整大小后 xAxis 隐藏

xAxis hides after resize in react rechart

reactjs

charts

react-redux

recharts