Comments (8)
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.
okey Thanks
from react-native-gifted-charts.
Any option to show value directly as topLabelComponent.
from react-native-gifted-charts.
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.
from react-native-gifted-charts.
from react-native-gifted-charts.
from react-native-gifted-charts.
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)
- Custom chart horizontal stack
- Bar chart width (spacing) HOT 1
- Highlighted on curved line chart
- (AreaChart) Allow overflow of data points in non-scrollable chart HOT 1
- Type Error: Have any of these errors been reported? HOT 9
- Area chart with transparent background below data
- Candle Stick Chart
- PieChart Error : UIView base class does not support pointerEvent value: box-none HOT 1
- Bars not showing sometimes and fast animation then provided animation time HOT 1
- Need help to implement swipe gesture similar to apple health
- pointerConfig is not working when spacing between the dots is more than 3px
- Change pointerLable style on a certain index in LineChart
- Bar chart with onFocus/pointerConfig (touch and drag) support?
- onBlur or make out of focus area chart props
- [web] Partial data loss when getting over `250px` of height
- Bars Behind Mid Axis on Population Pyramid Charts
- The `mostNegativeValue` setting does not appear to be working as expected.
- Set NegativeHeight
- Cannot read property "barWidth" of undefined HOT 1
- Support for secondaryXAxis
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.