Comments (8)
Abhinandan-Kushwaha
commented on May 23, 2024
Hi @duc562000 👋
You can use the topLabelComponent property inside data objects.
Here's an example-
const data = [
{value: 20},
{value: 30},
{value: 50, topLabelComponent: () => <Text style={{color:'red',fontSize:18,marginBottom:6}}>50</Text>},
{value: 40},
{value: 30},
];
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<BarChart width={300} data={data} />
</View>
);
Hope it helps🤗
from react-native-gifted-charts.
duc562000
commented on May 23, 2024
okey Thanks
from react-native-gifted-charts.
kholusoft
commented on May 23, 2024
Any option to show value directly as topLabelComponent.
from react-native-gifted-charts.
Abhinandan-Kushwaha
commented on May 23, 2024
Hi @kholusoft 👋
From version 1.3.23 onwards we can show values directly as topLabelComponent, using the showValuesAsTopLabel prop.
I have added the props- showValuesAsTopLabel, topLabelContainerStyle and topLabelTextStyle to Bar charts.
Here's an example-
The code for the above chart is-
const data = [{value: 6}, {value: 8}, {value: 5}, {value: 5}, {value: 8}]
return <BarChart
data={data}
showValuesAsTopLabel
topLabelTextStyle={{color:'brown', fontWeight:'bold'}}
/>from react-native-gifted-charts.
kholusoft
commented on May 23, 2024
Thanks a lot.
Is there any way to reduce bottom margin below bar chart. I find high
margin below charts
…On Sat, Nov 25, 2023 at 4:44 AM Abhinandan Kushwaha < ***@***.***> wrote:
Hi @kholusoft <https://github.com/kholusoft> 👋
From version 1.3.23 onwards we can show values directly as
topLabelComponent, using the showValuesAsTopLabel prop.
I have added the props- showValuesAsTopLabel, topLabelContainerStyle and
topLabelTextStyle to *Bar* charts.
Here's an example-
topLabel.png (view on web)
<https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/assets/20596944/1de7294a-31e7-46ff-996a-cadb17bee4e9>
The code for the above chart is-
const data = [{value: 6}, {value: 8}, {value: 5}, {value: 5}, {value: 8}]
return <BarChart
data={data}
showValuesAsTopLabel
topLabelTextStyle={{color:'brown', fontWeight:'bold'}}/>
—
Reply to this email directly, view it on GitHub
<#99 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABIBDHHSJK3P4REIORYNCIDYGES6VAVCNFSM5PUS62LKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBSGYYTGMRVG44A>
.
You are receiving this because you were mentioned.Message ID:
<Abhinandan-Kushwaha/react-native-gifted-charts/issues/99/1826132578@
github.com>
from react-native-gifted-charts.
kholusoft
commented on May 23, 2024
Also I am finding issue while using your library in expo-web
probably react-native-linear-gradient module. Do you have a workaround for
this.
…On Sun, Nov 26, 2023 at 1:36 PM kholu ***@***.***> wrote:
Thanks a lot.
Is there any way to reduce bottom margin below bar chart. I find high
margin below charts
On Sat, Nov 25, 2023 at 4:44 AM Abhinandan Kushwaha <
***@***.***> wrote:
> Hi @kholusoft <https://github.com/kholusoft> 👋
> From version 1.3.23 onwards we can show values directly as
> topLabelComponent, using the showValuesAsTopLabel prop.
>
> I have added the props- showValuesAsTopLabel, topLabelContainerStyle and
> topLabelTextStyle to *Bar* charts.
>
> Here's an example-
> topLabel.png (view on web)
> <https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/assets/20596944/1de7294a-31e7-46ff-996a-cadb17bee4e9>
>
> The code for the above chart is-
>
> const data = [{value: 6}, {value: 8}, {value: 5}, {value: 5}, {value: 8}]
> return <BarChart
> data={data}
> showValuesAsTopLabel
> topLabelTextStyle={{color:'brown', fontWeight:'bold'}}/>
>
> —
> Reply to this email directly, view it on GitHub
> <#99 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/ABIBDHHSJK3P4REIORYNCIDYGES6VAVCNFSM5PUS62LKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBSGYYTGMRVG44A>
> .
> You are receiving this because you were mentioned.Message ID:
> <Abhinandan-Kushwaha/react-native-gifted-charts/issues/99/1826132578@
> github.com>
>
from react-native-gifted-charts.
kholusoft
commented on May 23, 2024
I am getting following error
ERROR Invariant Violation:
[1075,"RCTView",611,{"onStartShouldSetResponder":true,"onMoveShouldSetResponder":true,"onResponderGrant":true,"onResponderMove":true,"onResponderEnd":true,"onResponderTerminationRequest":true,"position":"absolute","height":"<<NaN>>","bottom":57,"zIndex":0,"transform":[{"scaleX":1}],"width":20}]
is not usable as a native method argument
This error is located at:
in RCTView (created by View)
in View (created by BarAndLineChartsWrapper)
in RCTScrollContentView (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by BarAndLineChartsWrapper)
in RCTView (created by View)
in View (created by BarAndLineChartsWrapper)
in BarAndLineChartsWrapper (created by LineChart)
in LineChart (created by Crude)
in RCTView (created by View)
in View (created by Crude)
in RCTScrollContentView (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by Crude)
in RCTView (created by View)
in View (created by Crude)
in Crude (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in SceneView (created by PagerViewAdapter)
in RCTView (created by View)
in View (created by PagerView)
in RNCViewPager (created by PagerView)
in PagerView
in Unknown (created by PagerViewAdapter)
in PagerViewAdapter (created by TabView)
in RCTView (created by View)
in View (created by TabView)
in TabView (created by MaterialTopTabView)
in MaterialTopTabView (created by MaterialTopTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by Crudetab)
in Crudetab (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenNavigationContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by Dashboard)
in Dashboard (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View
in Unknown (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by StackNavigator)
in StackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
…On Sun, Nov 26, 2023 at 7:52 PM kholu ***@***.***> wrote:
Also I am finding issue while using your library in expo-web
probably react-native-linear-gradient module. Do you have a workaround for
this.
On Sun, Nov 26, 2023 at 1:36 PM kholu ***@***.***> wrote:
> Thanks a lot.
> Is there any way to reduce bottom margin below bar chart. I find high
> margin below charts
>
> On Sat, Nov 25, 2023 at 4:44 AM Abhinandan Kushwaha <
> ***@***.***> wrote:
>
>> Hi @kholusoft <https://github.com/kholusoft> 👋
>> From version 1.3.23 onwards we can show values directly as
>> topLabelComponent, using the showValuesAsTopLabel prop.
>>
>> I have added the props- showValuesAsTopLabel, topLabelContainerStyle
>> and topLabelTextStyle to *Bar* charts.
>>
>> Here's an example-
>> topLabel.png (view on web)
>> <https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/assets/20596944/1de7294a-31e7-46ff-996a-cadb17bee4e9>
>>
>> The code for the above chart is-
>>
>> const data = [{value: 6}, {value: 8}, {value: 5}, {value: 5}, {value: 8}]
>> return <BarChart
>> data={data}
>> showValuesAsTopLabel
>> topLabelTextStyle={{color:'brown', fontWeight:'bold'}}/>
>>
>> —
>> Reply to this email directly, view it on GitHub
>> <#99 (comment)>,
>> or unsubscribe
>> <https://github.com/notifications/unsubscribe-auth/ABIBDHHSJK3P4REIORYNCIDYGES6VAVCNFSM5PUS62LKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBSGYYTGMRVG44A>
>> .
>> You are receiving this because you were mentioned.Message ID:
>> <Abhinandan-Kushwaha/react-native-gifted-charts/issues/99/1826132578@
>> github.com>
>>
>
from react-native-gifted-charts.
Abhinandan-Kushwaha
commented on May 23, 2024
Thanks a lot. Is there any way to reduce bottom margin below bar chart. I find high margin below charts
…
On Sat, Nov 25, 2023 at 4:44 AM Abhinandan Kushwaha < @.***> wrote: Hi @kholusoft https://github.com/kholusoft 👋 From version 1.3.23 onwards we can show values directly as topLabelComponent, using the showValuesAsTopLabel prop. I have added the props- showValuesAsTopLabel, topLabelContainerStyle and topLabelTextStyle to Bar charts. Here's an example- topLabel.png (view on web) https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/assets/20596944/1de7294a-31e7-46ff-996a-cadb17bee4e9 The code for the above chart is- const data = [{value: 6}, {value: 8}, {value: 5}, {value: 5}, {value: 8}] return <BarChart data={data} showValuesAsTopLabel topLabelTextStyle={{color:'brown', fontWeight:'bold'}}/> — Reply to this email directly, view it on GitHub <#99 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIBDHHSJK3P4REIORYNCIDYGES6VAVCNFSM5PUS62LKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBSGYYTGMRVG44A . You are receiving this because you were mentioned.Message ID: </issues/99/1826132578@ github.com>
@kholusoft Are you still facing this issue (margin bottom below the bar) in the latest version 1.3.24 ?
from react-native-gifted-charts.
Related Issues (20)
- Add support to control the backgroundColor of each section of the yAxis individually HOT 1
- Does gifted charts support zoom implementation? HOT 1
- BarChart secondaryData is completely ignored
- [BUG] LineChart not displaying dataPointLabelComponent and dataPointText properly on RTL Layouts.
- Having trouble with pointerConfig - scrolling over data HOT 3
- secondary line data not aligning with secondary y axis HOT 2
- When I run in Android device that i am getting this issue HOT 4
- How do we add border radius to semi circle pie charts? HOT 5
- Animate piechart/semi circle HOT 2
- innerCircleBorderWidth not being applied
- Line chart - Multiple lines
- Line chart spacing
- RulesType at LineChart does not work HOT 1
- [BUG]:You specified `onScroll` on a <ScrollView> but not `scrollEventThrottle`. You will only receive one event
- How to achieve Multiple Circular Progressbar using this library? HOT 3
- PieChart focusOnPress stops working when onPress prop is provided HOT 1
- dynamic timestamp for xaxis
- date-time xaxis for react native HOT 1
- Pointer Config and Pointer Label component is not responsive in line graph. HOT 1
- first and last xAxisLabel are cut-off
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-gifted-charts.