abhinandan-kushwaha,react-native-gifted-charts

Comments (4)

Abhinandan-Kushwaha commented on May 23, 2024

Hi @fleuverouge Can you share the Code here?

from react-native-gifted-charts.

Abhinandan-Kushwaha commented on May 23, 2024

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>.

from react-native-gifted-charts.

fleuverouge commented on May 23, 2024

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
                    />

from react-native-gifted-charts.

Abhinandan-Kushwaha commented on May 23, 2024

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! 🎉

from react-native-gifted-charts.

BarChart - Value and section line don't match about react-native-gifted-charts HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent