react-native-chart-kit折线图Y轴设min-max值及fromZero异常问题咨询

1. Y轴自定义最小/最大值设置方案 #

直接在LineChart组件根属性上添加yAxisMin、yAxisMax即可实现自定义Y轴区间，不要把这两个属性配置到chartConfig对象中，这是多数开发者配置不生效的核心原因。
示例：如果需要Y轴区间固定为0~200，配置如下：

<LineChart
  // 其余原有属性保持不变
  yAxisMin={0}
  yAxisMax={200}
/>

如果需要实现Y轴从0开始，直接设置yAxisMin={0}即可，不需要额外开启fromZero属性。

2. Android端折线与数据点分离异常修复 #

该异常是react-native-chart-kit低版本的已知渲染冲突问题，按以下步骤排查修复：

• 首先升级react-native-chart-kit到最新稳定版，该问题在6.12.0及以上版本已做兼容修复
• 不要同时开启fromZero属性和配置yAxisMin={0}，二者同时存在会导致Android端坐标计算逻辑冲突，出现渲染错位
• 如果不需要曲线展示，可以关闭bezier属性，曲线渲染逻辑在低端Android设备上也可能出现坐标偏移
• 若你的数据全部为整数，将chartConfig中的decimalPlaces设置为0，避免浮点精度计算导致的坐标偏移

修复后的参考代码： #

import { Dimensions } from 'react-native';
import { LineChart } from 'react-native-chart-kit';

// 组件内调用
<LineChart
  data={{ 
    labels: date,
    datasets: [
      {
        data: systole,
        strokeWidth: 2,
      },
      {
        data: diastole,
        strokeWidth: 2,
      },
    ],
  }}
  withShadow={false}
  width={Dimensions.get("window").width}
  height={205}
  chartConfig={{
    backgroundGradientFrom: "white",
    backgroundGradientTo: "white",
    decimalPlaces: 0, // 整数数据可改为0
    color: (opacity = 0) => `rgba(2, 34, 82, ${opacity})`,
    style: {
      borderRadius: 16,
    },
    useShadowColorFromDataSet: false,
    propsForDots: {
      r: "6",
      strokeWidth: "2",
      stroke: "#ffa726",
    },
  }}
  withInnerLines={false}
  legend={["blut"]}
  bezier // 若仍有错位可删除该行关闭曲线模式
  yAxisMin={0} // 替代fromZero属性实现从0开始
  yAxisMax={200} // 按需设置你的最大值
  style={{
    marginVertical: 5,
    borderRadius: 16,
  }}
/>

内容的提问来源于stack exchange，提问作者Pavithra KS