Javascript X轴开始和结束标签不显示

我已经尝试设置X轴的格式以按顺序显示日期，但有些点仍然没有显示。以下是用于查看图表和编辑的链接- 第一个标签应该是“09-10-2020”，它显示为“10-2020”。我正在使用react原生svg图表库

import React from 'react';
import {LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import {View, Text} from 'react-native';
import {Svg, Line, Circle, G, Rect} from 'react-native-svg';

export default class CustomLineChartOne extends React.PureComponent {
  handleFill = (value) => {
    if (value > 100) {
      return 'rgba(190, 30, 45, 0.5)';
    } else if (value > 80 && value <= 100) {
      return 'yellow';
    } else {
      return '#CCE6D0';
    }
  };

  render() {
    const xAxisLabels = [
      '09-10-2020',
      '10-10-2020',
      '11-10-2020',
      '12-10-2020',
    ];
    const data = [50, 10, 40, 95];

    const Decorator = ({x, y, data}) => {
      return data.map((value, index) => (
        <View>
          <Rect
            x={x(index) - 1.75}
            y={y(value + 8)}
            width="4"
            height="40"
            rx="2"
            fill={this.handleFill(value)}
          />
          <Circle
            key={index}
            cx={x(index)}
            cy={y(value)}
            r={2}
            stroke={'#639123'}
            fill={'#606060'}
          />
        </View>
      ));
    };

    return (
      <View
        style={{
          height: 200,
          flexDirection: 'row',
        }}>
        <YAxis
          data={data}
          contentInset={{top: 20, bottom: 20}}
          svg={{
            fill: 'black',
            fontSize: 10,
          }}
        />
        <View style={{flex: 1}}>
          <LineChart
            style={{flex: 1}}
            data={data}
            svg={{stroke: 'rgb(134, 65, 244)'}}
            contentInset={{top: 10, bottom: 10, left: 10, right: 10}}>
            <Decorator />
          </LineChart>
          <XAxis
            data={data}
            formatLabel={(value, index) => xAxisLabels[index]}
            contentInset={{ left: 10, right: 10 }}
            svg={{ fontSize: 8, fill: '#3A8F98' }}
          />
        </View>
      </View>
    );
  }
} 

从“React”导入React；
从“react native svg charts”导入{LineChart，XAxis，YAxis}；
从“react native”导入{View，Text}；
从'react native Svg'导入{Svg，Line，Circle，G，Rect}；
导出默认类CustomLineChartOne扩展React.PureComponent{
handleFill=（值）=>{
如果（值>100）{
返回“rgba（190,30,45,0.5）”；
}否则，如果（值>80&&值{
返回数据.map（（值，索引）=>(
));
};
返回(
xAxisLabels[index]}
contentInset={{左：10，右：10}
svg={{fontSize:8，fill:'#3A8F98'}
/>
);
}
} 

对于

XAxis

组件，将

contentInset

的值设置为15左右，10看起来有点低，如果它仍然隐藏，则将其增加一点：

xAxisLabels[index]}
contentInset={{左：15，右：15}
svg={{fontSize:8，fill:'#3A8F98'}
/>