📊 Responsive horizontal bar chart layout issue – label and spacing inconsistencies on smaller screens

[ayushbharadva]

Description

I'm using react-native-gifted-charts to create a horizontal bar chart in my React Native app, and it works great for basic setups. However, I'm facing issues with responsiveness and layout when adapting the chart across different screen sizes.

What I'm trying to achieve

• Horizontal bar chart showing energy usage in %
• Each bar has a label above it (like "42%", "23%")
• A label on the Y-axis for each category (e.g., "Climate Control", "Lights", etc.)
• A layout that adapts well to small and large screens
• image for better visualization:

Problems I'm facing

1. Overlapping or truncated labels on smaller screens
2. Hardcoded values like barWidth, spacing, or labelWidth don’t scale well
3. Difficult to ensure clean alignment of topLabelComponents above each bar
4. Where i have reached so far:
   

Complete Code

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
import MultipleDevicesIcon from '../../assets/images/svgIcons/multipleDevices.svg';
import ThermostatIcon from '../../assets/images/svgIcons/thermostatSolid.svg';
import ShowerIcon from '../../assets/images/svgIcons/shower.svg';
import BulbWhiteIcon from '../../assets/images/svgIcons/bulbWhiteSolid.svg';
import BlindSolidIcon from '../../assets/images/svgIcons/blindSolid.svg';
import { actuatedNormalize } from '../../helper/responsiveScreen';
import { useTheme } from '@react-navigation/native';
import { BarChart } from 'react-native-gifted-charts';

const TEXTS = {
  CONSUMED_TODAY: 'Consumed today',
  ENERGY_FLOW_BREAKDOWN: 'Energy flow breakdown',
  CONSUMED_BY: 'Consumed by',
  CATEGORIES: {
    OTHERS: 'Others',
    CLIMATE_CONTROL: 'Climate control',
    HOT_WATER: 'Hot water',
    LIGHTS: 'Lights',
    OPENINGS: 'Openings',
  },
  PERCENTAGES: {
    OTHERS: '42%',
    CLIMATE_CONTROL: '23%',
    HOT_WATER: '21%',
    LIGHTS: '12%',
    OPENINGS: '2%',
  },
};

const ENERGY_DATA = (colors) => [
  {
    label: 'Others',
    labelName: TEXTS.CATEGORIES.OTHERS,
    icon: MultipleDevicesIcon,
    value: 42,
    frontColor: colors.blueMoonColor['200'],
    topLabelComponent: () => (
      <Text style={styles.text(colors)}>{TEXTS.PERCENTAGES.OTHERS}</Text>
    ),
  },
  {
    label: 'Climate control',
    labelName: TEXTS.CATEGORIES.CLIMATE_CONTROL,
    icon: ThermostatIcon,
    value: 23,
    frontColor: colors.blueMoonColor['300'],
    topLabelComponent: () => (
      <Text style={styles.text(colors)}>{TEXTS.PERCENTAGES.CLIMATE_CONTROL}</Text>
    ),
  },
  {
    label: 'Hot water',
    labelName: TEXTS.CATEGORIES.HOT_WATER,
    icon: ShowerIcon,
    value: 21,
    frontColor: colors.blueMoonColor['400'],
    topLabelComponent: () => (
      <Text style={styles.text(colors)}>{TEXTS.PERCENTAGES.HOT_WATER}</Text>
    ),
  },
  {
    label: 'Lights',
    labelName: TEXTS.CATEGORIES.LIGHTS,
    icon: BulbWhiteIcon,
    value: 12,
    frontColor: colors.blueMoonColor['500'],
    topLabelComponent: () => (
      <Text style={styles.text(colors)}>{TEXTS.PERCENTAGES.LIGHTS}</Text>
    ),
  },
  {
    label: 'Openings',
    labelName: TEXTS.CATEGORIES.OPENINGS,
    icon: BlindSolidIcon,
    value: 2,
    frontColor: colors.blueMoonColor['600'],
    topLabelComponent: () => (
      <Text numberOfLines={1} adjustsFontSizeToFit style={styles.text(colors)}>{TEXTS.PERCENTAGES.OPENINGS}</Text>
    ),
  },
];

const EnergyFlowBreakDown = () => {

  const { colors } = useTheme();
  const data = ENERGY_DATA(colors);

  return (
    <View style={styles.energyFeedContainer}>
      <View style={styles.chartDataContainer}>
        <View style={styles.barChartWrapper}>
          <BarChart
            data={data}
            horizontal
            barWidth={24}
            spacing={actuatedNormalize(12)}
            hideAxesAndRules
            yAxisThickness={0}
            xAxisThickness={0}
            topLabelContainerStyle={{ width: 40, marginLeft: -10, marginTop: -10 }}
            barStyle={styles.barStyle}
            isAnimated
            disablePress
            initialSpacing={0}
            backgroundColor="green"
            xAxisLabelTextStyle={{
              fontSize: actuatedNormalize(16),
              backgroundColor: 'white',
              color: 'red',
            }}
          />
        </View>
      </View>
    </View>
  );
};

export default EnergyFlowBreakDown;

const styles = StyleSheet.create({
  energyFeedContainer: {
    flex: 1,
    marginHorizontal: 16,
  },
  chartDataContainer: {
    flexDirection: 'row',
    borderRadius: 8,
    gap: 16,
    borderWidth: 1,
    borderColor: 'yellow',
  },
  barChartWrapper: {
    borderWidth: 1,
    borderColor: 'red',
    flex: 1,
  },
  barStyle: {
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    overflow: 'hidden',
  },
  text: (colors) => ({
    color: colors.whiteText_1,
    fontSize: actuatedNormalize(16),
    width: 32,
  }),
});

• Anyone have this issue and got a way to Fix this issue or have any idea on how this can be fixed please help, Thanks...