react-native-chart-kit icon indicating copy to clipboard operation
react-native-chart-kit copied to clipboard

Line Chart data does not extend to full width of graph

Open lmuller18 opened this issue 2 years ago • 1 comments

I am using a line chart and trying to fill the available space. I have checked that the graph itself is filling the container, but the data always seems to leave the final segment empty:

image
<LineChart
  data={{
    labels: [],
    datasets: [{ data: data.map((d) => d.y) }],
  }}
  bezier
  fromZero
  transparent
  width={width}
  height={200}
  chartConfig={{
    color: (opacity = 1) => `rgba(99, 102, 241, ${opacity})`,
  }}
  style={{
    paddingRight: 0,
    borderColor: "blue",
    borderWidth: 1,
  }}
/>

The same issue is seen when the padding isn't removed to hide the legend:

image

I am looking for a way to have the domain of the graph be exactly the domain of the data:

  • if there is only one data point, the data point is on the far left
  • if there are more than one data points, the last data point should be on the far right

Issue shown with 2 datapoints. The last data point is in the center instead of at the graphs full width

image

lmuller18 avatar Feb 24 '24 02:02 lmuller18

Duplicated #709

laishere avatar Feb 26 '24 02:02 laishere