Cannot make shape fully opaque when overlaid on a filled contour

Dash Python
1

I would like to to make a filled contour map and overlay a filled shape on top of it, but I would like the overlay to be completely opaque. However when I try to do that, the shape on top is always party see through. The shape has an opacity attribute which does have an effect, but at maximum opacity (1) it is still quite see through. i have included a simple example (below) to illustrate the problem. Is there a way to increase the opacity or is there a different approach that can be used to get around this problem?

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

dataShape={'fill': 'toself',
 'line': {'color': 'black'},
 'mode': 'lines',
 'opacity': 1,
 'type': 'scatter',
 'x':[1,2,2,1,1],
 'y':[1,1,3,3,1]}

z=[[10, 10.625, 12.5, 15.625, 20],
           [5.625, 6.25, 8.125, 11.25, 15.625],
           [2.5, 3.125, 5., 8.125, 12.5],
           [0.625, 1.25, 3.125, 6.25, 10.625],
           [0, 0.625, 2.5, 5.625, 10]]

dataContour = go.Contour(
    z=z,
    colorscale='Jet',
)

layout = go.Layout(
    height=500,
)

app = dash.Dash()

app.layout = html.Div([
    html.H3('Test Shapes'),

    dcc.Graph(
        id='my-graph',
        figure=dict(data=[dataShape, dataContour], layout=layout)
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
2

It seems your example works fine, just missing one key fillcolor and its value in the dataShape dictionary.

This worked fine for me:

dataShape={'fill': 'toself',
 'fillcolor': '#ffffff', 
 'line': {'color': 'black'},
 'mode': 'lines',
 'opacity': 1,
 'type': 'scatter',
 'x':[1,2,2,1,1],
 'y':[1,1,3,3,1]}
3

That worked like a charm. Thanks for your help @eliasdabbas

1 Like