react-native-svg-charts animate does not work
1
I would like to know how to animate chart on react native iOS when I'm using react-native-svg-charts or if someone can help me to find another library chart with visualization data.
I tried to use the animate prop of the StackedAreaChart but it has no results!
Here is my code :
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'react chart',
};
render() {
const data = [
{
month: new Date(2015, 0, 1),
apples: 3840,
bananas: 1920,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 1, 1),
apples: 1600,
bananas: 1440,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 2, 1),
apples: 640,
bananas: 960,
cherries: 3640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 3320,
bananas: 480,
cherries: 640,
dates: 400,
},
]
const colors = [ 'green', '#aa00ff', 'red', 'yellow' ]
const keys = [ 'apples', 'bananas', 'cherries', 'dates' ]
const svgs = [
{ onPress: () => console.log('apples') },
{ onPress: () => console.log('bananas') },
{ onPress: () => console.log('cherries') },
{ onPress: () => console.log('dates') },
]
return (
<StackedAreaChart
style={ { height: 200, paddingVertical: 16 } }
data={ data }
keys={ keys }
colors={ colors }
curve={ shape.curveNatural }
showGrid={ false }
svgs={ svgs }
animate={true}
animationDuration={300}
/>
)
}
}
Any idea?
javascript react-native
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
add a comment |
1
I would like to know how to animate chart on react native iOS when I'm using react-native-svg-charts or if someone can help me to find another library chart with visualization data.
I tried to use the animate prop of the StackedAreaChart but it has no results!
Here is my code :
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'react chart',
};
render() {
const data = [
{
month: new Date(2015, 0, 1),
apples: 3840,
bananas: 1920,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 1, 1),
apples: 1600,
bananas: 1440,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 2, 1),
apples: 640,
bananas: 960,
cherries: 3640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 3320,
bananas: 480,
cherries: 640,
dates: 400,
},
]
const colors = [ 'green', '#aa00ff', 'red', 'yellow' ]
const keys = [ 'apples', 'bananas', 'cherries', 'dates' ]
const svgs = [
{ onPress: () => console.log('apples') },
{ onPress: () => console.log('bananas') },
{ onPress: () => console.log('cherries') },
{ onPress: () => console.log('dates') },
]
return (
<StackedAreaChart
style={ { height: 200, paddingVertical: 16 } }
data={ data }
keys={ keys }
colors={ colors }
curve={ shape.curveNatural }
showGrid={ false }
svgs={ svgs }
animate={true}
animationDuration={300}
/>
)
}
}
Any idea?
javascript react-native
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
If your question has been answered, please make sure to accept an answer for further references.
– MohamadKh75
Nov 22 '18 at 10:46
add a comment |
1
1
1
I would like to know how to animate chart on react native iOS when I'm using react-native-svg-charts or if someone can help me to find another library chart with visualization data.
I tried to use the animate prop of the StackedAreaChart but it has no results!
Here is my code :
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'react chart',
};
render() {
const data = [
{
month: new Date(2015, 0, 1),
apples: 3840,
bananas: 1920,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 1, 1),
apples: 1600,
bananas: 1440,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 2, 1),
apples: 640,
bananas: 960,
cherries: 3640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 3320,
bananas: 480,
cherries: 640,
dates: 400,
},
]
const colors = [ 'green', '#aa00ff', 'red', 'yellow' ]
const keys = [ 'apples', 'bananas', 'cherries', 'dates' ]
const svgs = [
{ onPress: () => console.log('apples') },
{ onPress: () => console.log('bananas') },
{ onPress: () => console.log('cherries') },
{ onPress: () => console.log('dates') },
]
return (
<StackedAreaChart
style={ { height: 200, paddingVertical: 16 } }
data={ data }
keys={ keys }
colors={ colors }
curve={ shape.curveNatural }
showGrid={ false }
svgs={ svgs }
animate={true}
animationDuration={300}
/>
)
}
}
Any idea?
javascript react-native
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
I would like to know how to animate chart on react native iOS when I'm using react-native-svg-charts or if someone can help me to find another library chart with visualization data.
I tried to use the animate prop of the StackedAreaChart but it has no results!
Here is my code :
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'react chart',
};
render() {
const data = [
{
month: new Date(2015, 0, 1),
apples: 3840,
bananas: 1920,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 1, 1),
apples: 1600,
bananas: 1440,
cherries: 960,
dates: 400,
},
{
month: new Date(2015, 2, 1),
apples: 640,
bananas: 960,
cherries: 3640,
dates: 400,
},
{
month: new Date(2015, 3, 1),
apples: 3320,
bananas: 480,
cherries: 640,
dates: 400,
},
]
const colors = [ 'green', '#aa00ff', 'red', 'yellow' ]
const keys = [ 'apples', 'bananas', 'cherries', 'dates' ]
const svgs = [
{ onPress: () => console.log('apples') },
{ onPress: () => console.log('bananas') },
{ onPress: () => console.log('cherries') },
{ onPress: () => console.log('dates') },
]
return (
<StackedAreaChart
style={ { height: 200, paddingVertical: 16 } }
data={ data }
keys={ keys }
colors={ colors }
curve={ shape.curveNatural }
showGrid={ false }
svgs={ svgs }
animate={true}
animationDuration={300}
/>
)
}
}
Any idea?
javascript react-native
javascript react-native
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
edited Nov 22 '18 at 7:41
MohamadKh75
9302923
9302923
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
asked Nov 22 '18 at 6:34
Hardinah RajaonanirinaHardinah Rajaonanirina
84
84
If your question has been answered, please make sure to accept an answer for further references.
– MohamadKh75
Nov 22 '18 at 10:46
add a comment |
If your question has been answered, please make sure to accept an answer for further references.
– MohamadKh75
Nov 22 '18 at 10:46
If your question has been answered, please make sure to accept an answer for further references.
– MohamadKh75
Nov 22 '18 at 10:46
If your question has been answered, please make sure to accept an answer for further references.
– MohamadKh75
Nov 22 '18 at 10:46
add a comment |
1 Answer
1
active
oldest
votes
2
What do you mean by animate chart? The animate={true} will have effect if you change the data!
Let's see that with an example:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 3840
},
{
b: 1920
},
{
c: 960
},
{
d: 400
}
]
};
}
render() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<TouchableOpacity
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
onPress={() => this.setState({ data: newData })}
>
<Text>Change Data!</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default TestingCharts;
UPDATE
As you mentioned in the comments, you want that chart start with an straight line then it animate to new data:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 0
},
{
b: 0
},
{
c: 0
},
{
d: 0
}
]
};
this.changeData();
}
changeData() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
setTimeout(() => {
this.setState({ data: newData });
}, 1000);
}
render() {
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<Text>My Beautiful Chart :D</Text>
</View>
</View>
</View>
);
}
}
export default TestingCharts;
Consider that you can change the duration of timeout from 1000 to any number in milliseconds!
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425105%2freact-native-svg-charts-animate-does-not-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
What do you mean by animate chart? The animate={true} will have effect if you change the data!
Let's see that with an example:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 3840
},
{
b: 1920
},
{
c: 960
},
{
d: 400
}
]
};
}
render() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<TouchableOpacity
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
onPress={() => this.setState({ data: newData })}
>
<Text>Change Data!</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default TestingCharts;
UPDATE
As you mentioned in the comments, you want that chart start with an straight line then it animate to new data:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 0
},
{
b: 0
},
{
c: 0
},
{
d: 0
}
]
};
this.changeData();
}
changeData() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
setTimeout(() => {
this.setState({ data: newData });
}, 1000);
}
render() {
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<Text>My Beautiful Chart :D</Text>
</View>
</View>
</View>
);
}
}
export default TestingCharts;
Consider that you can change the duration of timeout from 1000 to any number in milliseconds!
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
|
show 1 more comment
2
What do you mean by animate chart? The animate={true} will have effect if you change the data!
Let's see that with an example:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 3840
},
{
b: 1920
},
{
c: 960
},
{
d: 400
}
]
};
}
render() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<TouchableOpacity
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
onPress={() => this.setState({ data: newData })}
>
<Text>Change Data!</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default TestingCharts;
UPDATE
As you mentioned in the comments, you want that chart start with an straight line then it animate to new data:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 0
},
{
b: 0
},
{
c: 0
},
{
d: 0
}
]
};
this.changeData();
}
changeData() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
setTimeout(() => {
this.setState({ data: newData });
}, 1000);
}
render() {
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<Text>My Beautiful Chart :D</Text>
</View>
</View>
</View>
);
}
}
export default TestingCharts;
Consider that you can change the duration of timeout from 1000 to any number in milliseconds!
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
|
show 1 more comment
2
2
2
What do you mean by animate chart? The animate={true} will have effect if you change the data!
Let's see that with an example:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 3840
},
{
b: 1920
},
{
c: 960
},
{
d: 400
}
]
};
}
render() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<TouchableOpacity
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
onPress={() => this.setState({ data: newData })}
>
<Text>Change Data!</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default TestingCharts;
UPDATE
As you mentioned in the comments, you want that chart start with an straight line then it animate to new data:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 0
},
{
b: 0
},
{
c: 0
},
{
d: 0
}
]
};
this.changeData();
}
changeData() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
setTimeout(() => {
this.setState({ data: newData });
}, 1000);
}
render() {
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<Text>My Beautiful Chart :D</Text>
</View>
</View>
</View>
);
}
}
export default TestingCharts;
Consider that you can change the duration of timeout from 1000 to any number in milliseconds!
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
What do you mean by animate chart? The animate={true} will have effect if you change the data!
Let's see that with an example:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 3840
},
{
b: 1920
},
{
c: 960
},
{
d: 400
}
]
};
}
render() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<TouchableOpacity
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
onPress={() => this.setState({ data: newData })}
>
<Text>Change Data!</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default TestingCharts;
UPDATE
As you mentioned in the comments, you want that chart start with an straight line then it animate to new data:
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";
class TestingCharts extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
a: 0
},
{
b: 0
},
{
c: 0
},
{
d: 0
}
]
};
this.changeData();
}
changeData() {
newData = [
{
a: 2000
},
{
b: 4902
},
{
c: 325
},
{
d: 7812
}
];
setTimeout(() => {
this.setState({ data: newData });
}, 1000);
}
render() {
return (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<LineChart
style={{
flex: 1,
alignSelf: "stretch",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.5)",
margin: 10
}}
data={this.state.data}
svg={{
strokeWidth: 2,
stroke: Colors.WHITE
}}
animate
/>
</View>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch"
}}
>
<Text>My Beautiful Chart :D</Text>
</View>
</View>
</View>
);
}
}
export default TestingCharts;
Consider that you can change the duration of timeout from 1000 to any number in milliseconds!
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
edited Nov 24 '18 at 7:05
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
answered Nov 22 '18 at 7:33
MohamadKh75MohamadKh75
9302923
9302923
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
|
show 1 more comment
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
thanks for your help! in fact, I want to make an animation of each graph when loading. Kind at the beginning everything is flat and it goes up. and also be able to display data on the graphic when you press on the graph.
– Hardinah Rajaonanirina
Nov 22 '18 at 12:17
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
it works on barchart but if i try with another, it doesn't
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
<AreaChart key={index} style={ StyleSheet.absoluteFill } data={ item.data } svg={item.svg} contentInset={ { top: 20, bottom: 20 } } curve={ shape.curveNatural } animate animationDuration={500} > </AreaChart>
– Hardinah Rajaonanirina
Nov 22 '18 at 12:51
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
You mean: 1. Start chart with an straight line then it animates to the real data? 2. You want to change data when you click on it?
– MohamadKh75
Nov 22 '18 at 15:11
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
start chart with straight line then i animates to the real data...
– Hardinah Rajaonanirina
Nov 23 '18 at 14:30
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425105%2freact-native-svg-charts-animate-does-not-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If your question has been answered, please make sure to accept an answer for further references.
– MohamadKh75
Nov 22 '18 at 10:46