Issues with Horizontal Grouped Bar Chart rendering and customization

[engineer-dilnawaz]

Description

Issues with Horizontal Grouped Bar Chart rendering and customization

Description

When trying to render a horizontal bar chart (and especially grouped ones), there are multiple problems:

1. Auto height/width not respected → The chart does not expand to fit the parent container. Even if there’s free space on screen, the chart is cropped.
2. Last bar cropped → In horizontal mode, the last bar is not fully visible.
3. Gap between X-axis and chart is not controllable → The bars and X-axis labels are stuck together, and no prop exists to control this spacing.
4. Grouped horizontal chart labels → For grouped charts, the labels should appear aligned like in the attached image, but currently this is not supported.

---

Minimal reproduction

import { BarChart as GiftedBarChart } from 'react-native-gifted-charts'

import { HPX } from '~app/utils'

import { HorizontalBarChartProps } from './HorizontalBarChartProps'
import { useBarChart } from './useBarChart'

export const HorizontalBarChart = (props: HorizontalBarChartProps) => {
  const { NUMBER_OF_SECTIONS, BAR_WIDTH, X_AXIS_THICKNESS, Y_AXIS_THICKNESS, BAR_COLOR, SPACING } =
    useBarChart()

  return (
    <GiftedBarChart
      hideRules
      hideOrigin
      isAnimated
      horizontal
      hideYAxisText
      disablePress
      disableScroll
      xAxisLabelTextStyle={{ color: 'white' }}
      endSpacing={200}
      labelWidth={40}
      adjustToWidth
      labelsExtraHeight={-20}
      backgroundColor={'red'}
      color={BAR_COLOR}
      xAxisThickness={X_AXIS_THICKNESS}
      yAxisThickness={Y_AXIS_THICKNESS}
      frontColor={BAR_COLOR}
      barWidth={BAR_WIDTH}
      noOfSections={NUMBER_OF_SECTIONS}
      spacing={SPACING}
      shiftX={-3}
      shiftY={-10}
      {...props}
    />
  )
}

Following is the screenshot of what I am looking for in group bar chart the xAxis Label should be right in middle of two bars

Steps to reproduce

import { BarChart as GiftedBarChart } from 'react-native-gifted-charts'

export const HorizontalBarChart = (props) => {
const { NUMBER_OF_SECTIONS, BAR_WIDTH, X_AXIS_THICKNESS, Y_AXIS_THICKNESS, BAR_COLOR, SPACING } =
useBarChart()

return (
<GiftedBarChart
hideRules
hideOrigin
isAnimated
horizontal
hideYAxisText
disablePress
disableScroll
xAxisLabelTextStyle={{ color: 'white' }}
endSpacing={200}
labelWidth={40}
adjustToWidth
labelsExtraHeight={-20}
backgroundColor={'red'}
color={BAR_COLOR}
xAxisThickness={X_AXIS_THICKNESS}
yAxisThickness={Y_AXIS_THICKNESS}
frontColor={BAR_COLOR}
barWidth={BAR_WIDTH}
noOfSections={NUMBER_OF_SECTIONS}
spacing={SPACING}
shiftX={-3}
shiftY={-10}
{...props}
/>
)
}

Snack or a link to a repository

https://snack.expo.dev/@dilnawazatexpo/group-bar-chart

version of react-native-gifted-charts

1.4.63

React Native version

0.80.2

Platforms

Android, iOS

Workflow

React Native

[Abhinandan-Kushwaha]

Hi @engineer-dilnawaz Can you share screenshots of the issues? In the expo link that you shared, I can only see the issue 4, which is- "the labels are not aligned".
Rest of the issues are not reproducible.

[engineer-dilnawaz]

Issues

1. The chart does not cover the full available width. For example, if I set the background color to red, it should cover the entire visible area, but it doesn’t.
2. The last bar is cropped, which indicates that the height is also not being adjusted according to the content.
3. There is no flexibility to properly adjust the label styles. On the left side, I had to use labelsExtraHeight={-20} to shift the labels, but by default they appear as if left padding is applied.
4. The gap between labels and the chart should be dynamic and configurable.
5. In the code snippet below, I’ve added some commented props that helped me manually adjust the chart. However, I don’t believe this is the correct or intended way to achieve the desired output.

Screenshot

Example

 <GiftedBarChart
      hideRules
      hideOrigin
      isAnimated
      horizontal
      hideYAxisText
      disablePress
      disableScroll
      xAxisLabelTextStyle={{ color: 'white' }}
      // endSpacing={200}
      // labelWidth={40}
      adjustToWidth
      // labelsExtraHeight={-20}
      backgroundColor={'red'}
      color={BAR_COLOR}
      xAxisThickness={X_AXIS_THICKNESS}
      yAxisThickness={Y_AXIS_THICKNESS}
      frontColor={BAR_COLOR}
      barWidth={BAR_WIDTH}
      noOfSections={NUMBER_OF_SECTIONS}
      spacing={SPACING}
      // shiftX={-3}
      // shiftY={-10}
      {...props}
    />