How can I update chart with state change
When I am listing the new data it updates but then the chart only updates the first time. I don't have access inside the Line component so I can't do componentWillReceiveProps(nextProps) for that one. How can I update the chart with each new state change?
import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
class Chart extends Component {
componentWillReceiveProps(nextProps) {
debugger
this.setState({ data: nextProps.info });
}
constructor(props) {
super(props);
this.state = {
data:
}
}
render() {
let chart = {
chartData:{
labels: this.state.data,
datasets:[
{
label: 'Weight',
data: this.state.data,
backgroundColor:[
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
]
}
]
}
}
return (
<div className="chart" style={{height: 200 + "px", width: 100 + "%"}}>
<Line
data={chart.chartData}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>
<ul>
{this.state.data.map(val=> <li>{val}</li>)}
</ul>
</div>
);
}
}
ruby-on-rails reactjs
add a comment |
When I am listing the new data it updates but then the chart only updates the first time. I don't have access inside the Line component so I can't do componentWillReceiveProps(nextProps) for that one. How can I update the chart with each new state change?
import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
class Chart extends Component {
componentWillReceiveProps(nextProps) {
debugger
this.setState({ data: nextProps.info });
}
constructor(props) {
super(props);
this.state = {
data:
}
}
render() {
let chart = {
chartData:{
labels: this.state.data,
datasets:[
{
label: 'Weight',
data: this.state.data,
backgroundColor:[
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
]
}
]
}
}
return (
<div className="chart" style={{height: 200 + "px", width: 100 + "%"}}>
<Line
data={chart.chartData}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>
<ul>
{this.state.data.map(val=> <li>{val}</li>)}
</ul>
</div>
);
}
}
ruby-on-rails reactjs
Are you planning on changingdata
inside that component? If not, you don't need to usestate
at all and you can just usethis.props.info
directly inrender()
.
– cubrr
Jan 2 at 4:01
add a comment |
When I am listing the new data it updates but then the chart only updates the first time. I don't have access inside the Line component so I can't do componentWillReceiveProps(nextProps) for that one. How can I update the chart with each new state change?
import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
class Chart extends Component {
componentWillReceiveProps(nextProps) {
debugger
this.setState({ data: nextProps.info });
}
constructor(props) {
super(props);
this.state = {
data:
}
}
render() {
let chart = {
chartData:{
labels: this.state.data,
datasets:[
{
label: 'Weight',
data: this.state.data,
backgroundColor:[
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
]
}
]
}
}
return (
<div className="chart" style={{height: 200 + "px", width: 100 + "%"}}>
<Line
data={chart.chartData}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>
<ul>
{this.state.data.map(val=> <li>{val}</li>)}
</ul>
</div>
);
}
}
ruby-on-rails reactjs
When I am listing the new data it updates but then the chart only updates the first time. I don't have access inside the Line component so I can't do componentWillReceiveProps(nextProps) for that one. How can I update the chart with each new state change?
import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
class Chart extends Component {
componentWillReceiveProps(nextProps) {
debugger
this.setState({ data: nextProps.info });
}
constructor(props) {
super(props);
this.state = {
data:
}
}
render() {
let chart = {
chartData:{
labels: this.state.data,
datasets:[
{
label: 'Weight',
data: this.state.data,
backgroundColor:[
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
]
}
]
}
}
return (
<div className="chart" style={{height: 200 + "px", width: 100 + "%"}}>
<Line
data={chart.chartData}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>
<ul>
{this.state.data.map(val=> <li>{val}</li>)}
</ul>
</div>
);
}
}
ruby-on-rails reactjs
ruby-on-rails reactjs
asked Jan 2 at 0:57
Cynthia RittenbachCynthia Rittenbach
104
104
Are you planning on changingdata
inside that component? If not, you don't need to usestate
at all and you can just usethis.props.info
directly inrender()
.
– cubrr
Jan 2 at 4:01
add a comment |
Are you planning on changingdata
inside that component? If not, you don't need to usestate
at all and you can just usethis.props.info
directly inrender()
.
– cubrr
Jan 2 at 4:01
Are you planning on changing
data
inside that component? If not, you don't need to use state
at all and you can just use this.props.info
directly in render()
.– cubrr
Jan 2 at 4:01
Are you planning on changing
data
inside that component? If not, you don't need to use state
at all and you can just use this.props.info
directly in render()
.– cubrr
Jan 2 at 4:01
add a comment |
0
active
oldest
votes
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
});
}
});
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%2f54000154%2fhow-can-i-update-chart-with-state-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f54000154%2fhow-can-i-update-chart-with-state-change%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
Are you planning on changing
data
inside that component? If not, you don't need to usestate
at all and you can just usethis.props.info
directly inrender()
.– cubrr
Jan 2 at 4:01