Wrong x-axis marker spacings

[varunnaagaraj]

I am trying to get a graph with x markers at equal spacing but I am getting this as the output. Am I doing something wrong? Below is the code i am using as well. I wanted to have the last marker within the boundary of graph and equal spacing. Any help appreciated.

const markerSpacing = this.props.data.length > 20 ? 12 : this.props.data.length > 10 ? 7 : 5
<SlideAreaChart
        curveType={shape.curveMonotoneX}
        data={this.props.data}
        height={this.props.chartProps.height}
        axisHeight={this.props.chartProps.axisHeight}
        axisWidth={this.props.chartProps.axisWidth}
        width={this.props.chartProps.width}
        alwaysShowIndicator={false}
        scrollable={true}
        xAxisProps={{
          axisLabel: this.props.xAxisLabel,
          axisLabelStyle: styles.axisLabel,
          axisLabelAlignment: XAxisLabelAlignment.center,
          axisMarkerLabels: this.props.data.map(val=> new Date(val.x).toTimeString().substring(0,5)),
          markerSpacing,
          specialEndMarker: undefined,
          adjustForSpecialMarkers: true
        }}
        yAxisProps={{
          axisLabel: this.props.yAxisLabel,
          showAverageLine: true,
          averageLineColor: "red",
          rotateAxisLabel: true,
          axisLabelStyle: styles.axisLabel,
          markerChartOffset: 10,
          hideMarkers: true,
          numberOfTicks: this.props.chartProps.numberOfTicks,
          labelLeftOffset: -10,
          axisLabelAlignment: YAxisLabelAlignment.middle,
        }}
        toolTipProps={this.props.tooltipObject}
      />