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'; // Errorand import { Plot } from 'react-plotly.js'; // ErrorDon'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: