Bar graph is not centering when using the bar graph from react-native-chart-kit module

Question

I am trying to align this react-native-chart-kit bar graph to the center. Bar Chart

This is code that I have currently:

      <BarChart
          data={{
            labels: ["SU", "MO", "TU", "WE", "TH", "FR", "SA"],
            datasets: [
              {
                data: [
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                ],
              },
            ],
          }}
          width={Dimensions.get("window").width - 100}
          height={220}
          withHorizontalLabels={false}
          fromZero={true}
          withInnerLines={false}
          chartConfig={{
            backgroundGradientFrom: dark.backgroundColor,
            backgroundGradientTo: dark.backgroundColor,
            decimalPlaces: 0,
            fillShadowGradientFrom: accent,
            fillShadowGradientTo: accent,
            fillShadowGradientFromOpacity: 1,
            fillShadowGradientToOpacity: 0.25,
            barPercentage: 0.75,
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          }}
          style={{
            marginVertical: 10,
            borderRadius: 10,
          }}
        />

I was thinking that disabling the withHorizontalLabels attribute would also remove the space that it would take up, but it did not. I have tried adjusting the propsForHorizontalLabels styles but with no result.

Fotios Tsakiris · Accepted Answer · 2023-04-28T12:03:47.127

Here is a working example:

import React from 'react';
import { View, Dimensions } from 'react-native';
import { BarChart } from 'react-native-chart-kit';

export default function App() {
  const data = {
    labels: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],
    datasets: [
      {
        data: [
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
        ],
      },
    ],
  };

  const chartConfig = {
    backgroundGradientFrom: '#1E2923',
    backgroundGradientTo: '#08130D',
    decimalPlaces: 0,
    fillShadowGradientFrom: '#00bfff',
    fillShadowGradientTo: '#00bfff',
    fillShadowGradientFromOpacity: 1,
    fillShadowGradientToOpacity: 0.25,
    barPercentage: 0.75,
    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  };

  return (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <BarChart
        data={data}
        width={350}
        height={220}
        yAxisSuffix="%"
        chartConfig={chartConfig}
        style={{ marginVertical: 8, borderRadius: 16 }}
      />
    </View>

  );
}

Without the Y axis.

It's a work around, since I could not remove the Yaxis and move the charts in the middle. So I wrapped the Chart in a View and I moved it to the left, so that only the Charts will be visible and not the Y axis.


import React from 'react';
import { View, Dimensions } from 'react-native';
import { BarChart } from 'react-native-chart-kit';

export default function App() {
  const data = {
    labels: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],
    datasets: [
      {
        data: [
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
        ],
      },
    ],
  };

  const chartConfig = {
    backgroundGradientFrom: '#1E2923',
    backgroundGradientTo: '#08130D',
    decimalPlaces: 0,
    fillShadowGradientFrom: '#00bfff',
    fillShadowGradientTo: '#00bfff',
    fillShadowGradientFromOpacity: 1,
    fillShadowGradientToOpacity: 0.25,
    barPercentage: 0.75,
    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  };

  const screenWidth = Dimensions.get('window').width;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ overflow: 'hidden', borderRadius: 16 }}>
        <BarChart
          data={data}
          width={350} // decrease width to fit within available space
          height={220}
          chartConfig={chartConfig}
          style={{ marginLeft: -88, paddingLeft: 16 }} // adjust marginLeft and paddingLeft values
          contentInset={{ left: -132, right: 32 }}
          svg={{ style: { borderTopLeftRadius: 16, borderBottomLeftRadius: 16 } }}
        />
      </View>
    </View>
  );
}

Check it here: https://snack.expo.dev/@footios/charts-in-the-center

Thank you for the response! While this works, I am needing to remove the Y-axis labels and have the bars span across where the labels were, in addition to taking up the space where they were originally. — Brandon Peterson, Apr 27 '23 at 22:30

Bar graph is not centering when using the bar graph from react-native-chart-kit module

1 Answers1