I'm trying to use react-native-gifted-charts to fill the visible space between my header and footer components. There won't be any vertical scroll, so my phone screen will look something like:

However whenever I try to achieve this within RN, it doesn't seem to do what I'm wanting...

const TestBarChart = () => {
  const barData = [
    { value: 30, label: 'Jan' },
    { value: 50, label: 'Feb' },
    { value: 70, label: 'Mar' },
    { value: 40, label: 'Apr' },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>Header Component</Text>
      </View>

      <View style={styles.chartContainer}>
        <BarChart
          barData={barData}
          width={300}
          height={300} // Manually setting height
        />
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerText}>Footer Component</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    height: 60,
    backgroundColor: '#6EC6FF'
  },
  chartContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    height: 60,
    backgroundColor: '#FFC6A5'
  }
});

export default TestBarChart;

AI suggests to me that I replace the height={300} with height={'100%'}, but that makes things... interesting.

I'm trying to use react-native-gifted-charts to fill the visible space between my header and footer components. There won't be any vertical scroll, so my phone screen will look something like:

However whenever I try to achieve this within RN, it doesn't seem to do what I'm wanting...

const TestBarChart = () => {
  const barData = [
    { value: 30, label: 'Jan' },
    { value: 50, label: 'Feb' },
    { value: 70, label: 'Mar' },
    { value: 40, label: 'Apr' },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>Header Component</Text>
      </View>

      <View style={styles.chartContainer}>
        <BarChart
          barData={barData}
          width={300}
          height={300} // Manually setting height
        />
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerText}>Footer Component</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    height: 60,
    backgroundColor: '#6EC6FF'
  },
  chartContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    height: 60,
    backgroundColor: '#FFC6A5'
  }
});

export default TestBarChart;

AI suggests to me that I replace the height={300} with height={'100%'}, but that makes things... interesting.

• reactjs
• react-native

1 Answer 1

The gifted charts library expects a numeric height value, so using a percentage string (like '100%') won't work

Below Is the Solution code for your problem

import React, { useState } from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { BarChart } from 'react-native-gifted-charts';

const TestBarChart = () => {
  const [chartHeight, setChartHeight] = useState(0);
  const barData = [
    { value: 30, label: 'Jan' },
    { value: 50, label: 'Feb' },
    { value: 70, label: 'Mar' },
    { value: 40, label: 'Apr' },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text>Header Component</Text>
      </View>

      {/* Chart Container */}
      <View
        style={styles.chartContainer}
        onLayout={(event) => {
          const { height } = event.nativeEvent.layout;
          setChartHeight(height);
        }}
      >
        {/* Only render the chart after we've measured the height */}
        {chartHeight > 0 && (
          <BarChart
            barData={barData}
            width={Dimensions.get('window').width - 90} // adjust as needed
            height={chartHeight}
          />
        )}
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerText}>Footer Component</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 60,
    backgroundColor: '#6EC6FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  chartContainer: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    marginBottom:60,
    marginTop:60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    height: 60,
    backgroundColor: '#FFC6A5',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footerText: {
    fontWeight: 'bold',
  },
});

export default TestBarChart;

Test Image

First get the hight 0f the Chart Container

• The onLayout prop on the chartContainer view captures its height after layout. This height is stored in the chartHeight state variable.

Passing a Numeric Height to bar chart

• Once the container's height is known, it is passed as the height prop to the BarChart, ensuring the chart fills the available space.

Render Bar Chart According to condition