react-native-chart-kit xLabels are not in line with columns

[fridriks98]

Hello, I'm using the latest version of react-native-chart-kit package to create bar chart for my project. I noticed that as my data grew for the chart, the x-axis labels weren't inline with the barchart columns. Any idea how to fix this?

[fridriks98]

Here is the code for the chart:

// React&React Native
import React from "react";
import { Dimensions, ScrollView, StyleSheet, View } from "react-native";
// 3rd party libraries
import { BarChart } from "react-native-chart-kit";
// Hooks
import useColorScheme from "../hooks/useColorScheme";
// Constants
import Colors from "../constants/Colors";
// Types
// Components
import { Text } from "./core/Text";

const SEGMENTS = 5;
const SEGMENTS_ARRAY = Array.from(
  { length: SEGMENTS + 1 },
  (_, i) => 100 - i * 20
);

const containerWidth = Dimensions.get("window").width - 80;

const minGraphWidth = containerWidth - 30;

// const graphWidth = Dimensions.get("window").width - 80;

export default function BarGraph({
  values,
  labels,
  ender,
}: {
  values: number[];
  labels: string[];
  ender?: boolean;
}) {
  const s = makeStyles();
  const colorScheme = useColorScheme();

  let graphWidth = 32 * values.length;
  if (graphWidth < minGraphWidth) {
    graphWidth = minGraphWidth;
  }

  const mainColor = ender
    ? Colors[colorScheme].ender
    : Colors[colorScheme].emerald;

  const chartConfig = {
    backgroundGradientFromOpacity: 0,
    backgroundGradientToOpacity: 0,
    fillShadowGradientTo: mainColor,
    fillShadowGradientFrom: mainColor,
    fillShadowGradientFromOpacity: 1,
    fillShadowGradientToOpacity: 1,
    color: () => Colors[colorScheme].ghost,
    labelColor: () => "#A3A3A3",
    strokeWidth: 2,
    barPercentage: 0.55,
    barRadius: 3,
    decimalPlaces: 0,
    propsForBackgroundLines: {
      stroke: "#F0F0F0",
      strokeDasharray: "",
    },
    propsForLabels: {
      fontSize: 8,
    },
  };

  const chartData = {
    labels,
    datasets: [
      {
        data: values,
      },
    ],
  };

  return (
    <View style={s.container}>
      <View style={s.labels}>
        {SEGMENTS_ARRAY.map((item) => (
          <View key={item} style={s.label}>
            <Text variant="p8" style={s.labelText} align="right">
              {item}%
            </Text>
          </View>
        ))}
      </View>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
        <BarChart
          data={chartData}
          width={graphWidth}
          height={180}
          chartConfig={chartConfig}
          showBarTops={false}
          fromZero
          fromNumber={100}
          yAxisLabel=""
          yAxisSuffix="%"
          yLabelsOffset={24}
          xLabelsOffset={-8}
          segments={SEGMENTS}
          style={{
            //   marginVertical: 20,
            paddingRight: 0,
            backgroundColor: Colors[colorScheme].ghost,
          }}
        />
      </ScrollView>
    </View>
  );
}

const makeStyles = () => {
  const colorScheme = useColorScheme();

  return StyleSheet.create({
    container: {
      width: containerWidth,
      // paddingVertical: 10,
      //   backgroundColor: Colors[colorScheme].ghost,
      //   borderRadius: 8,
      flexDirection: "row",
    },
    labels: {
      height: 158,
      justifyContent: "space-between",
      marginRight: 8,
    },
    label: {
      marginVertical: 9,
    },
    labelText: {
      color: "#A3A3A3",
      //   margin: 0,
    },
  });
};

[PaJoMe]

Do you have the same amount of data as you have labels? I'm facing a similar issue right now, but for me even the first bar isn't lined up, whereas in your screenshot it looks like you're giving it 6 pieces of data and making it distribute it amongst 7 labels.

Although I suppose I need to admit that my far right one is also almost lining up with the label, for some reason.