I am trying to create a multiline chart in simple react native mobile application.
I tried various libraries but the multiline chart is not working.
I am new to this. Please help.
you can use "react-native-char-kit"
just by providing multiple datasets, you can implement a multiline chart.
<LineChart
bezier
withHorizontalLabels={false}
withVerticalLabels={false}
data={{
labels: [' jan', ' feb', ' mar', ' apr', ' june', ' july'],
datasets: [
{
data: [10, -4, 6, -8, 80, 20],
strokeWidth: 2,
},
{
data: [5,8,6,9,8,2,-2],
strokeWidth: 2,
},
],
legend: ['car', 'bike'],
}}
width={Dimensions.get('window').width - 16}
height={200}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
borderRadius: 16,
}}
/>
Related
I am using this but I am facing issue that month is cutting in it so I am able to see Only 20% of JUN from top in month name. I am not able to get what is the problem in this.
import {
Calendar,
CalendarList,
Agenda,
Calander,
} from "react-native-calendars";
<CalendarList
current={calendarDate}
style={styles.calanderStyle}
markingType={"custom"}
theme={{
// backgroundColor: "rgb(31,35,43)",
calendarBackground: "rgb(31,35,43)",
textSectionTitleColor: "#ffffff",
textSectionTitleDisabledColor: "#ffffff",
selectedDayBackgroundColor: "#ffffff",
selectedDayTextColor: "#ffffff",
todayTextColor: "#ffffff",
dayTextColor: "#ffffff",
textDisabledColor: "#d9e1e8",
dotColor: "#00adf5",
selectedDotColor: "#ffffff",
arrowColor: "rgb(101,180,84)",
// disabledArrowColor: 'red',
monthTextColor: "white",
indicatorColor: "blue",
textDayFontFamily: "ProximaNova-Regular",
textMonthFontFamily: "ProximaNova-Regular",
textDayHeaderFontFamily: "ProximaNova-Regular",
textDayFontWeight: "400",
textMonthFontWeight: "bold",
textDayHeaderFontWeight: "200",
textDayFontSize: 15,
textMonthFontSize: 2,
textDayHeaderFontSize: 11,
}}
horizontal={true}
onDayPress={(day) => apiCallingFunction(day.dateString)}
caleendarWidth={300}
markedDates={calandarEvents}
/>
Try adding padding to the container the CalendarList is in.
I'm quite new to React Native and have a question.
I get this warning: Each child in a list should have a unique "key" prop.
I've tried everything. Now I even have Math.random() as key and I still get the warning.
Home.js:
return(
<ScrollView style={styles.container}>
<StatusBar barStyle='light-content' />
<ImageBackground source={image} style={styles.image} imageStyle={styles.image2}>
<LinearGradient colors={['transparent', 'rgba(249,249,249,1)' ]} locations={[.4, 1]}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 400
}} />
<TouchableOpacity activeOpacity={0.9} style={styles.topNews} onPress={()=> navigation.navigate('WebView')}>
<Text style={styles.topCategoryText}>ITALIAN LEAGUE</Text>
<Text style={styles.topTitleText}>Juventus legend: Ronaldo is natural to be criticized</Text>
<Text style={styles.topSourceText}>CNN Sport</Text>
</TouchableOpacity>
</ImageBackground>
<View style={{marginHorizontal: 10, flex: 1}}><RNMasonryScrollView
colums='2'
columnStyle={{flexDirection: 'column'}}
oddColumnStyle={{flex: 1, marginRight:15, marginLeft:10}}
evenColumnStyle={{flex:1,marginLeft:15}}
>
{[
<NewsDetail Key='1' title="Papers: Salah eager for Barca move" category='LA LIGA' imageSrc='https://en.as.com/en/imagenes/2020/06/11/football/1591881357_315795_noticia_normal.jpg'/>,
<NewsDetail Key='2' title="Man Utd struggles 'mentally impacting' Pogba, says France boss Deschamps" category='PREMIER LEAGUE' imageSrc='https://resources.premierleague.com/premierleague/photo/2019/06/20/88784d96-ef4b-4414-8b59-517c15b162a5/MW1-EditorialLead-new.png'/>,
<NewsDetail Key='3' title="Arsenal's complete player: The meteoric rise of Vivianne Miedema" category='PREMIER LEAGUE' imageSrc='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTupBTx2is9w3Z7pIhrorpPDMTFHmQhS1Ypmg&usqp=CAU'/>,
<NewsDetail Key='4' title="Mourinho hit with suspension by UEFA" category='SERIE A' imageSrc='https://www.telegraph.co.uk/content/dam/football/2018/02/13/TELEMMGLPICT000153853426_trans_NvBQzQNjv4BqwD2sfO9joeQ6RY-qlTATNB2cSHopZMn-aCc647VHTAY.jpeg'/>,
<NewsDetail Key='5' title="'Ronaldo is definitely faster than me!' – Bolt" category='LA LIGA' imageSrc='https://resources.premierleague.com/premierleague/photo/2018/08/10/bf1acdf0-7b10-4dfe-8844-06f0f18d5c38/2018-08-10T192712Z_1257041591_RC18CE142CA0_RTRMADP_3_SOCCER-ENGLAND-MUN-LEI.JPG'/>,
<NewsDetail Key='6' title="Southgate admits to fears over Maguire's career" category='LIGUE 1' imageSrc='https://images.daznservices.com/di/library/GOAL/a8/c9/vivianne-miedema-goal-50-gfx_nuhcgkr4tthu1kyux2ymq4y4l.jpg?t=-1147520971&quality=60&w=1200'/>,
]}
</RNMasonryScrollView></View>
</ScrollView>
)
NewsDetail.js
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image, Dimensions } from 'react-native';
const NewsDetail = (props) => {
const random = Math.random()
const ViewWidth = 157.5
// const [imageSize, setImageSize] = useState({width: 0, height: 0});
// const [viewSize, setViewSize] = useState({width: 0, height: 0});
const [imageHeight, setHeight] = useState(0);
const myUri = props.imageSrc;
useEffect(() => {
Image.getSize(myUri, (width, height) => {
setHeight(height / (width / ViewWidth));
});
}, [])
if(imageHeight > 0){
console.log(random)
return (
<View style={styles.newsDetail} key={`${random}`}>
<Image
resizeMode='cover'
style={{
width: ViewWidth,
height: imageHeight,
borderTopLeftRadius: 7,
borderTopRightRadius: 7,
}}
source={{ uri: myUri,}}
/>
<Text style={styles.textOne}>{props.category}</Text>
<Text style={styles.textTwo}>{props.title}</Text>
</View>)
} else return null;
}
const styles = StyleSheet.create({
image:{
width: '100%',
borderTopLeftRadius: 7,
borderTopRightRadius: 7
},
newsDetail:{
backgroundColor: "white",
marginTop: 10,
borderRadius: 7,
opacity: 0.9,
shadowColor: "grey",
shadowRadius: 5,
shadowOffset: {width: 0, height: 0},
shadowOpacity: 0.3
},
textOne:{
fontSize: 10,
color: '#7A7F82',
fontWeight: 'bold',
paddingTop: 10,
paddingHorizontal: 10,
paddingBottom:3
},
textTwo:{
fontSize: 14,
color: '#2D3041',
fontWeight: 'bold',
paddingHorizontal: 10,
paddingBottom:10
}
});
export default NewsDetail;
I dont know what to do. Any help? Also, is there any websites where I can pay to get quick help on questions I have about React Native? Similar to StackOverflow just you pay to get quick answers on all questions?
A proper way to generate a list is to create an array of objects, then you use map to display. In your codes, it's almost correct. You should use key instead of Key.
const articles = [
{ id: 1, title: "Papers: Salah eager for Barca move", category: 'LA LIGA', imageSrc: 'https://en.as.com/en/imagenes/2020/06/11/football/1591881357_315795_noticia_normal.jpg' },
{id: '2', title: "Man Utd struggles 'mentally impacting' Pogba, says France boss Deschamps", category: 'PREMIER LEAGUE', imageSrc: 'https://resources.premierleague.com/premierleague/photo/2019/06/20/88784d96-ef4b-4414-8b59-517c15b162a5/MW1-EditorialLead-new.png'},
{ id:'3',title: "Arsenal's complete player: The meteoric rise of Vivianne Miedema", category: 'PREMIER LEAGUE', imageSrc: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTupBTx2is9w3Z7pIhrorpPDMTFHmQhS1Ypmg&usqp=CAU'}]
<RNMasonryScrollView
colums='2'
columnStyle={{flexDirection: 'column'}}
oddColumnStyle={{flex: 1, marginRight:15, marginLeft:10}}
evenColumnStyle={{flex:1,marginLeft:15}}
>
{ articles.map((article) => {
return <NewsDetail key={article.id} title={article.title} imageSrc={article.imageSrc} />
})}
</RNMasonryScrollView>
I'm using react-native-chart-kit to display and am trying to change the y-axis (see screen shot below). I tried filling the yLabels property with an array of strings. But that didn't work. Any help would be appreciated!
You can use the formatYLabel prop for this (https://github.com/indiespirit/react-native-chart-kit#line-chart):
/*
* Generator helper function that allows us to
* cleanly return a label from an array
* of labels for each segment of the y-axis
*/
function* yLabel() {
yield* ['None', 'Low', 'Med', 'High'];
}
function App() {
// Instantiate the iterator
const yLabelIterator = yLabel();
return (
<View>
<LineChart
data={{
labels: ['Mo', 'Tu', 'We', 'Fr', 'Sa', 'Su'],
datasets: [
{
data: [3, 2, 1, 4, 4],
},
{
data: [5, 1, 3, 2],
},
],
}}
segments={3}
width={320}
height={200}
formatYLabel={() => yLabelIterator.next().value}
chartConfig={{
backgroundColor: 'white',
backgroundGradientFrom: 'grey',
backgroundGradientTo: 'grey',
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
}}
/>
</View>
);
}
export default App;
If you want to display 4 y-axis labels you need to set the segments prop of the LineChart to 3.
If you want to learn more about yield in Javascript you can read this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*.
I am using react-native-chart-kit and I am trying to have a cbar chart with any color filling up the bars, as of now it is gray but I am trying to change it but i have tried adding color: {} within the datasets part, as well as svg. But to no success. Any suggestions will be greatly appreciated.
render() {
return (
<View>
<BarChart
data={{
labels: [
'1',
'2',
'3',
'4',
'5',
'6',
'7'
],
datasets: [
{
data: this.props.data,
},
],
}}
svg={{ fill: 'green' }}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#fff',
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
propsForDots: {
r: "0",
strokeWidth: "2",
stroke: "#fff"
},
propsForBackgroundLines: {
strokeWidth: 0
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
);
}
You can set fillShadowGradient and fillShadowGradientOpacity in your chartConfig.
More info here: https://github.com/indiespirit/react-native-chart-kit#chart-style-object
You can add below lines in the
chartConfig:{{
fillShadowGradient:'skyblue',
fillShadowGradientOpacity:1,
}}
Its works fine
<BarChart
data={{
labels: this.state.bLabel,
datasets: [
{
data: this.state.bData,
}
]
}}
width={(Dimensions.get("window").width/100)*98}
height={300}
yAxisLabel=""
chartConfig={this.state.chartConfig}
verticalLabelRotation={0}
showValuesOnTopOfBars={true}
fromZero={true}
withCustomBarColorFromData={true}//FOR CUSTOM BAR COLORS
withHorizontalLabels ={false}
style={{alignSelf:"flex-start"}}
/>
//Go to
//node_modules->react-native-chart-kit->dist->BarChart.js
//Change this-> from line no-38 to 50
_this.renderBars = function (_a) {
var colorC=["#8000FF80","#0000ff80","#00FFFF80","#00ff0080","#ffff0080","#FFA50080","#ff000080","#2e000080","#00000080","#000000dd"];/////////AYUSH KHADE
var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, barRadius = _a.barRadius, withCustomBarColorFromData = _a.withCustomBarColorFromData;
var baseHeight = _this.calcBaseHeight(data, height);
return data.map(function (x, i) {
var barHeight = _this.calcHeight(x, data, height);
var barWidth = 32 * _this.getBarPercentage();
return (<Rect key={Math.random()} x={0 +
(i * (width - 0)) / data.length +
barWidth / 2} y={((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
paddingTop} rx={barRadius} width={barWidth} height={(Math.abs(barHeight) / 4) * 3} fill={colorC[i]}/>);//AYUSH KHADE
});
};
I want to create bar chart having each bar different color with x-axis values. I have tried barChart from react-native-svg-charts.
You can create the bar chart having each bar with different color using the react-native-svg-charts module using the BarChart. I have just created a bar chart with different color using the code below:-
you can provide the data with each different svg colors as below:-
const data1 = [ 14, -1, 100, -95, -94, -24, -8, 85, -91, 35, -53, 53, -78, 66, 96, 33, -26, -32, 73, 8 ]
.map((value) => ({ value }))
const data2 = [ 24, 28, 93, 77, -42, -62, 52, -87, 21, 53, -78, -62, -72, -6, 89, -70, -94, 10, 86, 84 ]
.map((value) => ({ value }))
const barData = [
{
data: data1,
svg: {
fill: 'rgb(134, 65, 244)',
},
},
{
data: data2,
svg: {
fill: 'red',
},
},
]
Then you can use this bar data inside the bar chart so that you get 2 bars with different colors as red and blue.
<BarChart
yAccessor={({ item }) => item.value}
style={{ height: 200 }}
data={ barData }
svg={{ fill: 'green' }}
contentInset={{ top: 30, bottom: 30 }}
>
<Grid/>
</BarChart>
Let me know if you still have any problem.
You can even find this example on the examples of the react-native-svg-charts on this link.