-
-
Notifications
You must be signed in to change notification settings - Fork 134
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Axes labels disappearing for 3D scatter plot for non marker mode #33
Comments
Thanks for this bug report! I can't actually replicate this behaviour outside of your repo, for example this works for me: <!DOCTYPE html>
<html>
<head>
<title>react-plotly.js Scratch</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.plot.ly/plotly-1.33.0.min.js"></script>
<script crossorigin src="https://unpkg.com/react-plotly.js@1.2.0/dist/create-plotly-component.js"></script>
</head>
<body>
<div id="chart"> </div>
<script>
var gd = document.getElementById('chart')
var data = [
{
x: [1, 2, 3],
y: [4, 5, 6],
z: [7, 8, 9],
type: 'scatter3d',
mode: 'lines+markers',
}
];
var layout = {};
ReactDOM.render(
React.createElement(createPlotlyComponent(Plotly),
{ data: data, layout: layout}), gd );
</script>
</body>
</html> |
Any idea what might be causing this? My guess might be something with how the webpack integration might be working, although I've followed the instructions for that in the README. I'm seeing this consistently with this webpack setup. I also experimented by using a ref directly and using the Plotly library and not React-Plotly but seeing the same behavior. I was also having some trouble getting the imports to work as specified as in here. Was seeing runtime errors from react when using the default import e.g. import Plot from 'react-plotly.js'; // Error and import { Plot } from 'react-plotly.js'; // Error Don't know if this is related, I see you using createReactPlotlyComponent, but I'm assuming that's integrated into how the module is exported. |
OK, first things first: I was able to reproduce the axes issue with Webpack and without React or create-react-app or TypeScript, so the issue seems to be in the Webpack bundling step. I'll try to find a fix for this shortly, but I may need to involve some plotly.js people. With respect to the imports |
I believe we have a fix ready for this problem, it seems to be a dependency issue that shows up differently based on whether you install with |
@nicolaskruchten Awesome, looking forward to the fix. |
This should be fixed with the latest version of plotly.js. There were some issues with versions of |
I've just tried your example app with plotly.js version 1.34.0 and it works with both NPM and Yarn but please note that I had to erase |
(note that I'm assuming the error was from |
Thanks, I've confirmed this works 👍 |
I've made a simple repo that reproduces this issue: https://github.com/lnunno/react-plotly-axes-bug
If you change the mode to
'lines'
or'markers+lines'
the axes labels disappear.The text was updated successfully, but these errors were encountered: