show value on top of bar chart #99
Comments
|
Hi @duc562000 👋 You can use the 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🤗 |
|
okey Thanks |
|
Any option to show value directly as topLabelComponent. |
|
Hi @kholusoft 👋 I have added the props- 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'}}
/> |
|
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>
|
|
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>
>
|
|
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>
>>
>
|
@kholusoft Are you still facing this issue (margin bottom below the bar) in the latest version |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to show value on top of bar chart ?
The text was updated successfully, but these errors were encountered: