Right align grid lines with labels

[budget-coder]

Given rotated x-axis labels, is it possible to implement a feature such that x-axis grid lines can be left-adjusted, right-adjusted or adjusted with margins if that's easier?

Expected Behavior

See the following picture

Actual Behavior

Same picture above but without the red drawings. Grid lines are centered no matter what.

Screenshots

Data and config

import React from "react";
import { LineChart } from "react-native-charts-wrapper";

class TestChart extends React.Component {
  render() {
    return (
      <LineChart
        style={{
          // flex: 1,
          paddingTop: 0,
          height: "100%",
        }}
        xAxis={{
          labelRotationAngle: 360 - 45,
          position: "BOTTOM",
          granularity: 3600,
          timeUnit: "SECONDS",
          valueFormatter: "date",
          valueFormatterPattern: "dd/MM/yy HH:mm",
        }}
        data={{
          dataSets: [
            {
              config: {
                drawCircles: false,
                drawHighlightIndicators: false,
                drawFilled: false,
                drawValues: false,
              },
              label: "Some time series",
              values: [
                { x: 1611576000, y: 10 },
                { x: 1611576300 + 3600, y: 10 },
                { x: 1611576600 + 3600 * 2, y: 10 },
                { x: 1611576800 + 3600 * 3, y: 10 },
                { x: 1611576900 + 3600 * 4, y: 10 },
              ],
            },
          ],
        }}
      />
    );
  }
}

Steps to Reproduce the Problem

Specifications

• Version:
  • Charts: 0.5.7
  • React Native: 0.63.3
• Platform: Android 10, iOS 14

[nijarv]

@fabervae Sorry I don't have idea on that but I have a doubt why you are giving granularity as 3600 and multiplying and adding it with 3600.