Line chart full width

[cagataysayg]

Hi im using line chart but i can't make it full width. I checked the element inspector there is no padding so it should be a width problem

[laishere]

You can modify the LineChart.tsx.

Check the point calculation logic here:

react-native-chart-kit/src/line-chart/LineChart.tsx

Line 677 in f30a37d

const x = (i: number) =>

You need to modify the x calculation logic, the straight way to do is changing the xmax calculations:

react-native-chart-kit/src/line-chart/LineChart.tsx

Line 651 in f30a37d

getXMaxValues = (data: Dataset[]) => {

From:

  getXMaxValues = (data: Dataset[]) => {
    return data.reduce((acc, cur) => {
      return cur.data.length > acc ? cur.data.length : acc;
    }, 0);
  };

To:

  getXMaxValues = (data: Dataset[]) => {
    const xmax = data.reduce((acc, cur) => {
      return cur.data.length > acc ? cur.data.length : acc;
    }, 0);
    return Math.max(1, xmax - 1);
  };

[cs-manughian]

You can modify the LineChart.tsx.

Check the point calculation logic here:

react-native-chart-kit/src/line-chart/LineChart.tsx

Line 677 in f30a37d

const x = (i: number) =>

You need to modify the x calculation logic, the straight way to do is changing the xmax calculations:

react-native-chart-kit/src/line-chart/LineChart.tsx

Line 651 in f30a37d

getXMaxValues = (data: Dataset[]) => {

From:

  getXMaxValues = (data: Dataset[]) => {
    return data.reduce((acc, cur) => {
      return cur.data.length > acc ? cur.data.length : acc;
    }, 0);
  };

To:

  getXMaxValues = (data: Dataset[]) => {
    const xmax = data.reduce((acc, cur) => {
      return cur.data.length > acc ? cur.data.length : acc;
    }, 0);
    return Math.max(1, xmax - 1);
  };

@laishere Thank you! Should we open a pull request?

[laishere]

@cs-manughian You're welcome! Feel free to go ahead with the pull request.