indiespirit / react-native-chart-kit

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)
https://expo.io/@indiespirit/react-native-chart-kit
MIT License
2.84k stars 658 forks source link

Barchart right side cut bar #632

Open Tushar321321 opened 2 years ago

Tushar321321 commented 2 years ago

Here is the screenshot we are facing issue with bar is cut when we increases width bars around space increases also so, Please help with some solutions. Thank you in advance Screenshot 2022-09-21 at 6 30 35 PM

nandorojo commented 1 year ago
Screen Shot 2022-09-28 at 3 50 36 PM

Same issue here. Can't seem to figure it out.

nandorojo commented 1 year ago

@indiespirit any ideas here?

This is my usage:

<BarChart
  data={{
    labels: labels || [],
    datasets: [
      {
        data: data || [],
        colors: data?.map((_, i) => {
          if (firstFutureIndex && i >= firstFutureIndex) {
            return () => `${color}50`
          }
          return () => color
        }),
      },
    ],
  }}
  height={height}
  chartConfig={{
    color: () => theme.colors.primary,
    backgroundGradientFrom: theme.colors.muted,
    backgroundGradientTo: theme.colors.muted,
    horizontalOffset: 0,
    fillShadowGradientFromOpacity: 1,
    fillShadowGradientToOpacity: 1,
    fillShadowGradientOpacity: 1,
    fillShadowGradientTo: '#FFF500',
    fillShadowGradientFrom: '#FFF968',
    fillShadowGradientFromOffset: 0.1,
    fillShadowGradientToOffset: 0.7,
    barRadius: theme.radii.$2,
    paddingRight: 0,
    paddingTop: 0,
    labelColor: () => theme.colors.primary,
    formatTopBarValue: format,
    propsForLabels: {
      fontFamily: font.body.normal,
    },
  }}
  style={{
    backgroundColor: theme.colors.muted,
    paddingRight: 0,
    paddingTop: theme.space.$3,
    paddingLeft: 0,
    paddingBottom: 0,
  }}
  showValuesOnTopOfBars={true}
  fromZero
  withHorizontalLabels={false}
  withVerticalLabels={true}
  xLabelsOffset={0}
  showBarTops={false}
  yLabelsOffset={0}
  withInnerLines={false}
  width={width - 10}
  yAxisLabel={''}
  xAxisLabel={''}
  valueOnTopOfBarOffsetY={-3}
  yAxisSuffix=""
/>

If there's interest I can try to reproduce this.

nandorojo commented 1 year ago

The only solution I've found is to not show more than 8 bars.

ashishkanhasoft commented 1 year ago

ok

KevinMorize commented 1 month ago

Hello, for me I use barPercentage props based on data.length so something like this:

barPercentage: 1.5 - (data.length * 0.1)