Mesh3d Graphing bug

plotly.js
1

So I am working on a 3d charting web application and run into some confusing problems with Mesh3d objects. I am attempting to graph from a pandas dataframe with a X column, Y column, and Z column. Many of the graphs I am creating have a parabolic shape, however mesh3d is “filling in” the porabla as you can see below. These points are not in the dataframe and for some reason are being filled in by plotly.

1
1.PNG1043×781 114 KB
2
2.PNG992×845 102 KB

The graph objects are inside of a html page as seen below:

<div class="container">
    <div class="row">
        <div class="col-lg-16">
            <div class="chart" id="graph">
                <script>
                    var layout = {
                      autosize: true,
                      height: 700,
                      wigth: 950,
                      margin: {
                        l: 0,
                        r: 0,
                        b: 0,
                        t: 0,
                        pad: 10
                      }
                    }
                    var graphs = {{plot | safe}};
                    Plotly.plot('bargraph',graphs,layout,{});
                </script>
            </div>
        </div>
    </div>
</div>

The python function used to pass the data to the html file is the following:

data = [go.Mesh3d(x = Main_df.iloc[:,0].values,
                                y = Main_df.iloc[:,1].values,
                                z = Main_df['Sum'].values,
                                opacity=1,
                                colorscale = 'deep',
                                showscale = True,
                                intensity = Main_df['Sum'].values

                                )
         	]

	graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)

	return graphJSON

I’m wondering if there is any way to prevent plotly from filling in these spaces in my mesh to make a clearer graph. Thanks

2

Can you try adding flatshading=True to the mesh3d trace?
Thanks!