We Keep Coding

How to fill area under `recharts` `AreaChart` curve, when data has +ve and -ve values

I have a chart made with the javascript recharts library. How can I fill the area under the curve, down to the bottom of the visible area, not to zero?
Currently looking like this:
But I would like the curve to fill to the bottom of the chart, and not down to/up to zero.
Code for this section is as follows:
return (
<ResponsiveContainer width="100%" height="100%">
<AreaChart
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<defs>
<linearGradient id="fillGradient" x1="0" y1="-1" x2="0" y2="1">
<stop offset="5%" stopColor="#3182ce" stopOpacity={1} />
<stop offset="95%" stopColor="#FFFFFF" stopOpacity={1} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 0" opacity={0.2} />
<XAxis dataKey="date" tickFormatter={parseTimeLabels} />
<YAxis />
<Tooltip />
<Legend />
<Area
type="natural"
dataKey="height"
stroke="#8884d8"
fillOpacity={1}
fill="url(#fillGradient)"
activeDot={{ scale: 10, onClick: (e, point) => onLineClick(point) }}
/>
</AreaChart>
</ResponsiveContainer>
);

In case someone stumbles across this, the area charts usually covers the values between 0 and the given value at the dataKey (in this case height)
If you want to color a specific area, you can let your dataKey prop reference an array value [yMin, height].
It is mentioned in this PR in the recharts library: https://github.com/recharts/recharts/issues/316

How to gradient border in react native

Hello does anyone tell me how to add border gradient in react native i know that for linear gradient we use react-native-linear-gradient package but for border how can we achive that.
this is code that i try
<TouchableOpacity onPress={() => {console.warn('gradient')})}>
<LinearGradient colors={['#000', '#fff']}>
<View style={styles.circleGradient}>
<Text style={styles.visit}>Gradient Border</Text>
</View>
</LinearGradient>
</TouchableOpacity>

<TouchableOpacity onPress={() => {console.warn('gradient')})}>
<LinearGradient colors={['rgba(255, 255, 255, 0.54)', '#fff']} locations={[0.7, 1]}>
<View style={styles.circleGradient}>
<Text style={styles.visit}>Gradient Border</Text>
</View>
</LinearGradient>
</TouchableOpacity>
You can play with this [0.7, 1] to set the gradient location

pinch scroll view zoom inside touchable

I am having issues implementing a scroll view pinch zoom inside a touchable opacity. The scroll view must be a child of the touchable for this use case. any suggestions. The code for this is currently:
Image Component:
return (
<ScrollView
maximumZoomScale={2}
onStartShouldSetResponder={() => true}
key={node.key}
style={{
width: "100%",
}}
>
<FitImage {...imageProps} />
</ScrollView>
);
Then parent is roughly:
<TouchableOpacity
ref={this.accordian}
style={styles.row}
onPress={() => this.toggleExpand()}
>
<ImageComponent/>
</TouchableOpacity>
Mainly focussing on the child image component. It now doesn't allow me to use zoom
Any Suggestions?
Thanks

Touchable opacity on press not working inside SVG tags

I have a component inside an <Svg> where I have a button (<TouchableOpacity> with <View>) inside the component.
While the button onClick worked fine standalone, it's not working when I wrap the component inside the SVG.
<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
<Defs>
<LinearGradient
id='prefix__b'
x1={'75.7%'}
y1={'34.3%'}
x2={'84.6%'}
y2={'-9.6%'}
gradientUnits='objectBoundingBox'
>
<Stop offset={1} stopColor='#2ff290' />
</LinearGradient>
</Defs>
<View >
<TouchableOpacity
onPress={() => {
console.log('DSDA')
}}
><Text>Click me!!</Text>
</TouchableOpacity>
</View>
</Svg>
https://github.com/react-native-community/react-native-svg/issues/1050

You need to wrap your svg with TouchableOpacity tag,
Like this:
<TouchableOpacity
onPress={() => {
console.log('DSDA')
}}
>
<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
<Defs>
<LinearGradient
id='prefix__b'
x1={'75.7%'}
y1={'34.3%'}
x2={'84.6%'}
y2={'-9.6%'}
gradientUnits='objectBoundingBox'
>
<Stop offset={1} stopColor='#2ff290' />
</LinearGradient>
</Defs>
<View ><Text>Click me!!</Text>
</View>
</Svg>
</TouchableOpacity>

The reason for that is that SVG is at the top as parent element, disabling the accessibility to TouchableOpacity. This means the press command is unreachable for TouchableOpacity. In short use single parent element.

In any case where touchable opacity does not register press event, it may depends on where you import touchable opacity from. try importing it from 'react-native' itself, not some community modules

wrapping your svg inside Touchable should able to make recognise touch for svg.Try wrapping it inside touchable component.

Use TouchableOpacity as a wrapper for the SVG and everything that you need inside.

Get touchable out SVG not a supported component atm

<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243'
{...props}>
<View>
<Defs>
<LinearGradient
id='prefix__b'
x1={'75.7%'}
y1={'34.3%'}
x2={'84.6%'}
y2={'-9.6%'}
gradientUnits='objectBoundingBox'
>
<Stop offset={1} stopColor='#2ff290' />
</LinearGradient>
</Defs>
</View >
<View>
<TouchableOpacity
onPress={() => {
console.log('DSDA')
}}
><Text>Click me!!</Text>
</TouchableOpacity>
</View>
</Svg>
You can try this just wrap the Defs by View this could work.

Make svg fill div even after rotation

I've got an inline svg with viewBox={ "0 0 150 345" }.
I want to be able in rotate it with 90, 180, 270 degrees (where the rotation origin is the center of the svg), and that the svg will take the entire space of the container in any position.
Currently I have:
<svg
style={{ height: '100%', width: '100%' }}
viewBox={ "0 0 150 345" }
preserveAspectRatio="xMidYMid"
>
<g transform={ "rotate(90 75.5 172.5" }>
// some content
</g>
</svg>
Problem is, when the rotation is with 90 or 270 degrees, the svg doesn't scale based on the width, rather still based on the height.
What am I missing?