Mesh3d Graphing bug

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.

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">
                    var layout = {
                      autosize: true,
                      height: 700,
                      wigth: 950,
                      margin: {
                        l: 0,
                        r: 0,
                        b: 0,
                        t: 0,
                        pad: 10
                    var graphs = {{plot | safe}};

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,
                                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

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