BarChart - Value and section line don't match

[fleuverouge]

Hi,
Thanks for this amazing package. However, I'm facing this issue with the BarChart component:
Please check this image for more comprehensive: Screenshot
The bars' values are 3 and 6, but their tops don't reach the relevant section lines.

[Abhinandan-Kushwaha]

Hi @fleuverouge Can you share the Code here?

[Abhinandan-Kushwaha]

Can you share the code here <#35>

…

On Thu, Nov 18, 2021 at 1:23 PM Ha Do ***@***.***> wrote: Hi, Thanks for this amazing package. However, I'm facing this issue with the BarChart component: Please check this image for more comprehensive: Screenshot <https://ibb.co/nLK5MkQ> The bars' values are 3 and 6, but their tops don't reach the relevant section lines. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#35>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE5ERUDLSGQIYLJW6C6PIG3UMSWHNANCNFSM5II5W7TA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[fleuverouge]

Hi @Abhinandan-Kushwaha ,
Thanks for replying
I had trouble with making a bar's label displayed fully with center-x alignment in small screens (like in the picture), so for each bar, I created 2 "mock" bars.

Here's my code:

Sizes calculation:

        const barWidth = width * 0.1;
        const labelWidth = width * 0.18;
        const mockBarWidth = (labelWidth - barWidth) / 2;

adjustedData: ( calculating this is a complicated process from our raw data, so I just pasted the output here)

[
   {
      "value":3,
      "spacing":0,
      "label":"Physics",
      "labelWidth":87,
      "frontColor":"rgba(0,0,0,0)",
      "barWidth":26.099999999999998,
      "labelTextStyle":{
         "color":"black",
         "fontSize":12
      }
   },
   {
      "value":3,
      "frontColor":"green",
      "spacing":0,
      "barWidth":34.800000000000004
   },
   {
      "value":3,
      "barWidth":26.099999999999998,
      "frontColor":"rgba(0,0,0,0)",
      "spacing":3.48
   },
   {
      "value":6,
      "spacing":0,
      "label":"Mathematics",
      "labelWidth":87,
      "frontColor":"rgba(0,0,0,0)",
      "barWidth":26.099999999999998,
      "labelTextStyle":{
         "color":"black",
         "fontSize":12
      }
   },
   {
      "value":6,
      "frontColor":"black",
      "spacing":0,
      "barWidth":34.800000000000004
   },
   {
      "value":6,
      "barWidth":26.099999999999998,
      "frontColor":"rgba(0,0,0,0)",
      "spacing":3.48
   }
]

<BarChart
                        backgroundColor={colors.white}
                        height={chartHeight}
                        noOfSections={3}
                        barBorderRadius={0}
                        data={adjustedData}
                        isAnimated
                        disablePress
                    />

[Abhinandan-Kushwaha]

Hi @fleuverouge
You can solve this issue by using the maxValue and stepValue props.
Try passing maxValue = {9}

Detailed inspection of the issue -

• Since the data includes values 3 and 6, it sets the maxValue = 10 (multiple of 10 next to the biggest value).
• And then since, you have passed noOfSections = 3 , each section height becomes 3.333....
• And, the labels appearing on y-axis are rounded figures, so the 3 that you see on y-axis is not actually 3, instead it's a rounded value of 3.333... (You can disable rounding by using the showFractionalValues prop.)

Note -
Whenever we use the noOfSections we must passstepValue and maxValue also.

It's mentioned in the documents here-
BarChartProps.md

Hope it solves your issue. Cheers! 🎉