show value on top of bar chart

[duc562000]

How to show value on top of bar chart ?

[Abhinandan-Kushwaha]

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🤗

[duc562000]

okey Thanks

[kholusoft]

Any option to show value directly as topLabelComponent.

[Abhinandan-Kushwaha]

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

[kholusoft]

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 https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/99#issuecomment-1826132578, 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>

[kholusoft]

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 https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/99#issuecomment-1826132578, 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>

[kholusoft]

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":"<>","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 https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/99#issuecomment-1826132578, 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>

[Abhinandan-Kushwaha]

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>

@kholusoft Are you still facing this issue (margin bottom below the bar) in the latest version 1.3.24 ?