I am using react-native-svg-charts to render some charts. In my case i use area chart (see image below). When the last data entries have same values, there is a bottom line appearing
Here is how i render the area chart
<AreaChart style = {{height: '100%', width: '100%' }} data = {Object.values(chartData)} curve={shape.curveBasis}
svg={{ fill: 'url(#gradient)', stroke: 'blue', fillOpacity: 0.8, scale: 1.002, strokeWidth: 0 }}
contentInset={{ top: scaleHeight(10), bottom: scaleHeight(10) }} animate >
<Gradient/>
</AreaChart>
The code for Gradient is as follows
const Gradient = ({ index }) => (
<Defs key={index}>
<LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
<Stop offset={'0%'} stopColor="blue" stopOpacity={1}/>
<Stop offset={'100%'} stopColor="white" stopOpacity={1}/>
</LinearGradient>
</Defs>
)
Related
I'm using this library to make a StackedAreaChart. It's currently working but I need to change the colors to gradients.Only I am able to plot points using the data,I want the gradient colors to be applied in the plotted chart area.
I have attached the code and screenshot for this.
<ChartPathProvider
data={{
points: chartData.map((data) => ({
x: toTimestamp(data.fiscal_year),
y:
data.close_price != null
? parseFloat(data.close_price).toFixed(
instrumentData.digit
)
: 0,
})),
smoothingStrategy: "bezier",
}}
>
<View>
<ChartPath
height={moderateScale(280)}
stroke="green"
strokeWidth={3}
width={screenWidth}
/>
<ChartDot>
<View
style={{
position: "absolute",
left: moderateScale(-35),
width: moderateScale(80),
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.4)",
}}
>
</View>
{/* Chart x & y axis */}
<ChartXLabel
format={toStringDate}
style={[
styles.M12_FW600_LH19_LS02,
styles.whiteColor,
]}
/>
<ChartYLabel
format={formatPrice}
style={[
styles.M12_FW600_LH19_LS02,
styles.whiteColor,
]}
/>
</View>
</ChartDot>
</View>
</ChartPathProvider>
Currently this charts
[1]: https://i.stack.imgur.com/jYptt.png
This is required
[2]: https://i.stack.imgur.com/pr270.png
(Edit: I also tried putting overflow: 'visible' in various locations to no avail.)
I'm using a date for the x-axis tick labels so I would like them to be at an angle to prevent overlap. The issue is that they are not being cut off at the bottom, as seen here (the colors are there to show different component edges):
Here is my code:
<View style={{ backgroundColor: 'red', paddingBottom: 50 }}>
<VictoryChart
theme={chartTheme}
width={screenWidth - 10}
animate={{
onLoad: { duration: 100 },
duration: 500,
}}
containerComponent={<VictoryContainer style={{ backgroundColor: 'blue', paddingBottom: 50 }} />} >
<VictoryAxis
label={plotText.xLabel}
style={{ // adding padding here does nothing
tickLabels: { angle: -45, textAnchor: 'end' } // adding padding here does nothing
}}
tickValues={dispRSHistData.ticks}
tickFormat={(t) => getFormattedDate(t)}
/>
<VictoryAxis
dependentAxis
label={plotText.yLabel} />
<VictoryLine
data={dispRSHistData.data}
x="timestamp"
y="percentSuccess"
style={{ data: { stroke: "tomato" } }}
size={10} />
</VictoryChart>
</View>
I've tried setting various heights manually but nothing seems to give space to show the full tick labels.
I didnt find an automatic solution to your problem
but mannualy adding "padding" prop to the chart worked for me
btw this solution is for VictoryNative on react native but I guess something similar works on react.js version too
check the 'padding' prop here
<VictoryChart width={400} theme={VictoryTheme.material}
padding={{bottom:100,right:50,left:50}}
>
<VictoryAxis //the x axis
// axisLabelComponent={<VictoryLabel angle={-90}/>}
tickLabelComponent={<VictoryLabel angle={-90} dy={-7}
textAnchor='end'
// labelPlacement="perpendicular"
/>}
/>
<VictoryAxis dependentAxis //the y axis
/>
I'm working on chart with react-native-svg-charts library, and seems like it is very flexible and cool, but I faced the issue. I need to build 24 hours timeline for xAxis and can not understand how to do it.
So I have a chart it looks like this
and the code of the chart is next:
<>
<View style={{flex: 1}} {...panResponder.current.panHandlers}>
<AreaChart
animate
style={{flex: 1}}
data={glucoseValues}
yMin={0}
yMax={180}
curve={shape.curveNatural}
contentInset={{...verticalContentInset}}
svg={{fill: 'url(#gradient)'}}>
<CustomLine/>
<Tooltip/>
</AreaChart>
<SafeArea/>
</View>
<YAxis
style={{width: apx(44)}}
data={[...Array(19).fill(1).map((el, i) => el + i * 10)]}
contentInset={verticalContentInset}
svg={{fontSize: apx(20), fill: '#617485'}}
/>
<XAxis
style={{
alignSelf: 'stretch',
width: apx(INIT_WIDTH),
height: apx(40),
}}
data={[...Array(24).fill(1)]}
formatLabel={(value, i) => {
return i === 0 ? '00:00' :
i % 4 === 0 ? moment().startOf('day').add(i, 'hours').format('HH:mm') :
i === 23 ? '23:59' : '';
}}
contentInset={{
left: 20,
right: 20,
}}
svg={{
fontSize: apx(20),
fill: '#617485',
alignmentBaseline: 'center',
textAnchor: 'middle',
y: apx(10),
}}
/>
</>
So as you see XAxis is kinda shows timeline but it is not applied. If it would, before and after the chart, we should see empty space like on this picture.
My question is next. How can I set up domain for xAxis that will work as on picture above?
For chart I user array of values for Y and array of timestamps for X. Maybe I should point somehow xMax, xMin properties for AreaChart. Any ideas?
Right now, I am using the CountdownCircleTimer as my "progress bar", but need one that counts up instead of down.
It looks like this, with a touchable image button in the middle that starts a recording.
<CountdownCircleTimer
isPlaying={progressCircle}
size={74}
strokeWidth={5}
duration={60}
colors={[["#000000", .001], [feedScreen ? "#F777B1" : "#64A6EC", .999]]}
trailColor={"transparent"}
>
<TouchableOpacity
style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
width: 62,
height: 62,
backgroundColor: "#000000",
})}
onPress={(e) => onPress(e)}
>
{children}
</TouchableOpacity>
</CountdownCircleTimer>
I'm trying to implement the CircularProgress component, but it hides the image/button. The top is the old countdown timer in the picture above, the bottom is the new circular progress bar, hiding the image/button.
<CircularProgress
value={duration}
delay={progressCircle}
radius={37}
activeStrokeWidth={5}
activeStrokeColor={feedScreen ? "#F777B1" : "#64A6EC"}
textColor={'transparent'}
>
<TouchableOpacity
style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
width: 62,
height: 62,
backgroundColor: "#000000",
})}
onPress={(e) => onPress(e)}
>
{children}
</TouchableOpacity>
</CircularProgress>
How can I put the image and button in the middle, like I did with the countdown circular?
You will have to use some form of absolute positioning.
Add something like this to your circular progress bar styling:
position: 'absolute',
alignSelf: 'center',
bottom: 0
You can adjust the absolute positioning via the top, left, and right proeprties as well.
I've been trying to add a linear gradient as a background to my react native app.
Here is my initial code:
<NavigationContainer theme={MyTheme}>
<Stack.Navigator
initialRouteName="Camera"
screenOptions={{
headerStyle: { elevation: 0 },
}}
>
And here my attempt at adding the gradient:
const MyTheme = {
colors: {
primary: "rgb(255, 45, 85)",
background: () => <LinearGradient colors={["red", "blue"]} />,
},
};
Now, when I console.log(MyTheme.colors) I get background: [Function background
Any idea how I can make this work?
You can try this, may help below code.
<LinearGradient
colors={["red", "blue"]}
start={{x: "Your postition", y: "Your postition"}}
end={{x: "Your postition", y: "Your postition"}}
/>
<View style={{flex:1}}>
<LinearGradient style={{ position: "absolute",
left:0,right: 0, top: 0,bottom: 0,
}}
colors={["#120318", "#221a36"]}
/>
</View>
If you set the LinearGradient's position to absolute, and set left,right,top,bottom as 0, LinearGradient will take up entire space's of its parent element.