为什么react-charts图表纵轴设置的min和max属性没有生效？

问题原因 #

你当前使用的react-charts为TanStack推出的开源图表库，并非基于Chart.js封装的衍生库，二者配置规则并不通用。你直接将min、max属性写在轴配置的根层级不符合该库的参数规范，因此配置不会被识别生效。

解决方法 #

该库的轴刻度范围配置需要放在scale属性下，只需修改你的axes配置代码即可：

const axes = React.useMemo(
  () => [
    { primary: true, type: 'ordinal', position: 'bottom' },
    { 
      type: 'linear', 
      position: 'left', 
      // 范围配置放到scale字段中
      scale: {
        min: 4,
        max: 10
      }
    }
  ],
  []
);

修改后重新运行，纵轴就会按照你设定的4-10范围渲染。

内容的提问来源于stack exchange，提问作者Michael Nusair