React Native Bar Chart within a scroll view is cut off

Question

I have a problem where a react-native-chart-kit is within a horizontal scrollview but the rightmost part of the bar chart gets cut off at the end of the scrollbar

import React, { useEffect } from 'react';
import { StyleSheet, ScrollView, View, Dimensions } from 'react-native';
import { BarChart } from 'react-native-chart-kit';
import { crowdData } from '../data/data';

const CrowdingChart = ({stationId}) => {

  const data = {
    labels: ['12am - 1am','3am - 4am','6am - 7am','9am - 10am','12pm - 1pm','3pm - 4pm','6pm - 7pm','9pm - 10pm'],
    datasets: [
      {
        data: crowdData[stationId]["THU"].reduce((acc, cum, index) => {
          if (index % 4 == 0){
            acc.push(cum)
          }else{
            acc[acc.length - 1] += cum
          }
          return acc
        }, []).map(elem => elem/4)
      }
    ]
  };

  return (
    <View style={styles.container}>

      <ScrollView horizontal={true}>
        <BarChart
          data={data}
          withHorizontalLabels={false}
          width={Dimensions.get('window').width * 2}
          height={300}
          chartConfig={{
            backgroundColor: '#fff',
            backgroundGradientFrom: '#fff',
            backgroundGradientTo: '#fff',
            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`
          }}
          style={styles.chart}
        />
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "90%",
    overflow: "hidden",
    borderWidth: 1,
    borderRadius : 20,
    paddingHorizontal: "2%"
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16
  },
  chart: {
    paddingRight: 0
  }
});

export default CrowdingChart;

application screenshot

I've tried changing padding for the container, the chart and the scrollview itself and the width of the scrollview but nothing worked

Fotios Tsakiris · Answer 1 · 2023-05-04T13:49:00.997

The width of the BarChart component is set to a value that is larger than the width of the screen.

Set the width of the BarChart to be equal to the total width of the chart data.


import React, { useEffect } from 'react';
import { StyleSheet, ScrollView, View, Dimensions } from 'react-native';
import { BarChart } from 'react-native-chart-kit';
import { crowdData } from '../data/data';

const CrowdingChart = ({stationId}) => {

  const data = {
    labels: ['12am - 1am','3am - 4am','6am - 7am','9am - 10am','12pm - 1pm','3pm - 4pm','6pm - 7pm','9pm - 10pm'],
    datasets: [
      {
        data: crowdData[stationId]["THU"].reduce((acc, cum, index) => {
          if (index % 4 == 0){
            acc.push(cum)
          }else{
            acc[acc.length - 1] += cum
          }
          return acc
        }, []).map(elem => elem/4)
      }
    ]
  };

  const labelWidth = 80; // Width of each label
  const chartWidth = data.labels.length * labelWidth;

  return (
    <View style={styles.container}>
      <ScrollView horizontal={true}>
        <BarChart
          data={data}
          withHorizontalLabels={false}
          width={chartWidth}
          height={300}
          chartConfig={{
            backgroundColor: '#fff',
            backgroundGradientFrom: '#fff',
            backgroundGradientTo: '#fff',
            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
            barPercentage: 0.5,
            barRadius: 5,
          }}
          style={styles.chart}
        />
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "90%",
    overflow: "hidden",
    borderWidth: 1,
    borderRadius : 20,
    paddingHorizontal: "2%"
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16
  },
  chart: {
    paddingRight: 0
  }
});

export default CrowdingChart;

Adjust the values of barPercentage and barRadius...

Thanks! Is there any way to do this but without the large gaps between bars? — CrookedNazgul, May 04 '23 at 12:31
Yes, with `barPercentage` and `barRadius`. Check updated solution above. — Fotios Tsakiris, May 04 '23 at 13:49
If the solution is helpful, please check it as accepted! Thanks — Fotios Tsakiris, May 05 '23 at 08:25

React Native Bar Chart within a scroll view is cut off

1 Answers1