Mixing
Unable to apply relayout method to the chart, react-plotly.js
I have created a barchart using react-ploty.js. I would like to change the width of the chart when an onClick event is performed on the bar, for which I am trying to using relayout method of Plotly to reset the width. But when I try to do so, it throws, Uncaught ReferenceError: Plotly is not defined error.
The way I am creating plot is :
import Plot from 'react-plotly.js';
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={layout}/>
chartRelayout () {
console.log("Relayout called");
Plotly.relayout({
width: 0.5 * window.innerWidth
});
}
Am i missing any import? I even tried to do plot.relayout and get the same error for that too. Any kind of help would be appreciated. Thanks!
reactjs plotly
asked Nov 21 '18 at 16:41
user2128user2128
96215
add a comment |
I have created a barchart using react-ploty.js. I would like to change the width of the chart when an onClick event is performed on the bar, for which I am trying to using relayout method of Plotly to reset the width. But when I try to do so, it throws, Uncaught ReferenceError: Plotly is not defined error.
The way I am creating plot is :
import Plot from 'react-plotly.js';
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={layout}/>
chartRelayout () {
console.log("Relayout called");
Plotly.relayout({
width: 0.5 * window.innerWidth
});
}
Am i missing any import? I even tried to do plot.relayout and get the same error for that too. Any kind of help would be appreciated. Thanks!
reactjs plotly
asked Nov 21 '18 at 16:41
user2128user2128
96215
add a comment |
I have created a barchart using react-ploty.js. I would like to change the width of the chart when an onClick event is performed on the bar, for which I am trying to using relayout method of Plotly to reset the width. But when I try to do so, it throws, Uncaught ReferenceError: Plotly is not defined error.
The way I am creating plot is :
import Plot from 'react-plotly.js';
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={layout}/>
chartRelayout () {
console.log("Relayout called");
Plotly.relayout({
width: 0.5 * window.innerWidth
});
}
Am i missing any import? I even tried to do plot.relayout and get the same error for that too. Any kind of help would be appreciated. Thanks!
reactjs plotly
asked Nov 21 '18 at 16:41
user2128user2128
96215
I have created a barchart using react-ploty.js. I would like to change the width of the chart when an onClick event is performed on the bar, for which I am trying to using relayout method of Plotly to reset the width. But when I try to do so, it throws, Uncaught ReferenceError: Plotly is not defined error.
The way I am creating plot is :
import Plot from 'react-plotly.js';
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={layout}/>
chartRelayout () {
console.log("Relayout called");
Plotly.relayout({
width: 0.5 * window.innerWidth
});
}
Am i missing any import? I even tried to do plot.relayout and get the same error for that too. Any kind of help would be appreciated. Thanks!
reactjs plotly
reactjs plotly
asked Nov 21 '18 at 16:41
user2128user2128
96215
asked Nov 21 '18 at 16:41
user2128user2128
96215
asked Nov 21 '18 at 16:41
user2128user2128
96215
asked Nov 21 '18 at 16:41
user2128user2128
96215
asked Nov 21 '18 at 16:41
user2128user2128
96215
96215
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Yes you are missing an import,you havent imported Plotly nor referenced it in your current file thats why you are getting
Uncaught ReferenceError: Plotly is not defined
You imported only Plot
import Plot from 'react-plotly.js';
Its detailed here how to install plotly.js for a webpack project hence giving you access to the Plotly object.
After following these instructions you would just.
import Plotly from 'plotly.js/dist/plotly'
BUT you can still achieve the resizing of the bars with the current react-plotly.js because its already calling the Plotly.react function when
One of data, layout or config has changed identity as checked via a shallow ===
Now all you have to do is define your layout data into your state, so that when we change the layout properties the Plot will be rendered again with the new layout properties.
Add the layout to the state.
constructor(props) {
super(props);
this.state = { layout: {...}};
}
chartRelayout () {
this.setState({
layout: {width: 0.5 * window.innerWidth}
})
}
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={this.state.layout}/>
This lets "react-plotly.js" handle the calls to the underlining "plotly.js" library as intended by the react-plotly.js library
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
add a comment |
There is nothing in this file that gives context to the Plotly object, which is why it is undefined.
On line 2, try writing import Plotly from 'plotly.js';. Also, what does your package.json look like? Make sure you have installed both react-plotly.js and plotly.js: $ npm install react-plotly.js plotly.js.
These packages end in .js, so it's possible you missed adding that during the install process.
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
add a 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
});
}
});
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%2f53416767%2funable-to-apply-relayout-method-to-the-chart-react-plotly-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes you are missing an import,you havent imported Plotly nor referenced it in your current file thats why you are getting
Uncaught ReferenceError: Plotly is not defined
You imported only Plot
import Plot from 'react-plotly.js';
Its detailed here how to install plotly.js for a webpack project hence giving you access to the Plotly object.
After following these instructions you would just.
import Plotly from 'plotly.js/dist/plotly'
BUT you can still achieve the resizing of the bars with the current react-plotly.js because its already calling the Plotly.react function when
One of data, layout or config has changed identity as checked via a shallow ===
Now all you have to do is define your layout data into your state, so that when we change the layout properties the Plot will be rendered again with the new layout properties.
Add the layout to the state.
constructor(props) {
super(props);
this.state = { layout: {...}};
}
chartRelayout () {
this.setState({
layout: {width: 0.5 * window.innerWidth}
})
}
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={this.state.layout}/>
This lets "react-plotly.js" handle the calls to the underlining "plotly.js" library as intended by the react-plotly.js library
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
add a comment |
Yes you are missing an import,you havent imported Plotly nor referenced it in your current file thats why you are getting
Uncaught ReferenceError: Plotly is not defined
You imported only Plot
import Plot from 'react-plotly.js';
Its detailed here how to install plotly.js for a webpack project hence giving you access to the Plotly object.
After following these instructions you would just.
import Plotly from 'plotly.js/dist/plotly'
BUT you can still achieve the resizing of the bars with the current react-plotly.js because its already calling the Plotly.react function when
One of data, layout or config has changed identity as checked via a shallow ===
Now all you have to do is define your layout data into your state, so that when we change the layout properties the Plot will be rendered again with the new layout properties.
Add the layout to the state.
constructor(props) {
super(props);
this.state = { layout: {...}};
}
chartRelayout () {
this.setState({
layout: {width: 0.5 * window.innerWidth}
})
}
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={this.state.layout}/>
This lets "react-plotly.js" handle the calls to the underlining "plotly.js" library as intended by the react-plotly.js library
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
add a comment |
Yes you are missing an import,you havent imported Plotly nor referenced it in your current file thats why you are getting
Uncaught ReferenceError: Plotly is not defined
You imported only Plot
import Plot from 'react-plotly.js';
Its detailed here how to install plotly.js for a webpack project hence giving you access to the Plotly object.
After following these instructions you would just.
import Plotly from 'plotly.js/dist/plotly'
BUT you can still achieve the resizing of the bars with the current react-plotly.js because its already calling the Plotly.react function when
One of data, layout or config has changed identity as checked via a shallow ===
Now all you have to do is define your layout data into your state, so that when we change the layout properties the Plot will be rendered again with the new layout properties.
Add the layout to the state.
constructor(props) {
super(props);
this.state = { layout: {...}};
}
chartRelayout () {
this.setState({
layout: {width: 0.5 * window.innerWidth}
})
}
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={this.state.layout}/>
This lets "react-plotly.js" handle the calls to the underlining "plotly.js" library as intended by the react-plotly.js library
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
Yes you are missing an import,you havent imported Plotly nor referenced it in your current file thats why you are getting
Uncaught ReferenceError: Plotly is not defined
You imported only Plot
import Plot from 'react-plotly.js';
Its detailed here how to install plotly.js for a webpack project hence giving you access to the Plotly object.
After following these instructions you would just.
import Plotly from 'plotly.js/dist/plotly'
BUT you can still achieve the resizing of the bars with the current react-plotly.js because its already calling the Plotly.react function when
One of data, layout or config has changed identity as checked via a shallow ===
Now all you have to do is define your layout data into your state, so that when we change the layout properties the Plot will be rendered again with the new layout properties.
Add the layout to the state.
constructor(props) {
super(props);
this.state = { layout: {...}};
}
chartRelayout () {
this.setState({
layout: {width: 0.5 * window.innerWidth}
})
}
<Plot
data={this.prepData(this.state.chartData)}
onClick={(data) => {this.chartRelayout();}
type={'bar'}
layout={this.state.layout}/>
This lets "react-plotly.js" handle the calls to the underlining "plotly.js" library as intended by the react-plotly.js library
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
answered Nov 25 '18 at 6:32
Tiisetso TjabaneTiisetso Tjabane
5651513
5651513
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
add a comment |
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
If I have multiple attributes in layout that I don't want to update but only want to change width, the above solution will not work right ? In addition to the width, I will have to reset all other attributes too.
– user2128
Nov 26 '18 at 20:26
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
No , you dont have to reset other attributes."When you call setState(), React merges the object you provide into the current state" Since you are only providing the width in your setState function, only the width will change and everything else will not change thats in the state. read about it here state-and-lifecycle.
– Tiisetso Tjabane
Nov 26 '18 at 20:45
add a comment |
There is nothing in this file that gives context to the Plotly object, which is why it is undefined.
On line 2, try writing import Plotly from 'plotly.js';. Also, what does your package.json look like? Make sure you have installed both react-plotly.js and plotly.js: $ npm install react-plotly.js plotly.js.
These packages end in .js, so it's possible you missed adding that during the install process.
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
add a comment |
There is nothing in this file that gives context to the Plotly object, which is why it is undefined.
On line 2, try writing import Plotly from 'plotly.js';. Also, what does your package.json look like? Make sure you have installed both react-plotly.js and plotly.js: $ npm install react-plotly.js plotly.js.
These packages end in .js, so it's possible you missed adding that during the install process.
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
add a comment |
There is nothing in this file that gives context to the Plotly object, which is why it is undefined.
On line 2, try writing import Plotly from 'plotly.js';. Also, what does your package.json look like? Make sure you have installed both react-plotly.js and plotly.js: $ npm install react-plotly.js plotly.js.
These packages end in .js, so it's possible you missed adding that during the install process.
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
There is nothing in this file that gives context to the Plotly object, which is why it is undefined.
On line 2, try writing import Plotly from 'plotly.js';. Also, what does your package.json look like? Make sure you have installed both react-plotly.js and plotly.js: $ npm install react-plotly.js plotly.js.
These packages end in .js, so it's possible you missed adding that during the install process.
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
edited Nov 25 '18 at 18:29
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
answered Nov 25 '18 at 6:02
Lexis HansonLexis Hanson
764
764
add a comment |
add a comment |
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%2f53416767%2funable-to-apply-relayout-method-to-the-chart-react-plotly-js%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
