# Setting consistent scatter plot y-axis range and heatmap colorbar range

**URL:** <https://community.plotly.com/t/setting-consistent-scatter-plot-y-axis-range-and-heatmap-colorbar-range/29670>\
**Category:** Dash Python\
**Created:** [October 7, 2019, 3:38pm UTC](https://community.plotly.com/t/setting-consistent-scatter-plot-y-axis-range-and-heatmap-colorbar-range/29670 "2019-10-07T15:38:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![beccamayers](https://avatars.discourse-cdn.com/v4/letter/b/e47c2d/32.png) [@beccamayers](https://community.plotly.com/u/beccamayers)\
**Post date:** [October 7, 2019, 3:38pm UTC](https://community.plotly.com/t/setting-consistent-scatter-plot-y-axis-range-and-heatmap-colorbar-range/29670/1 "2019-10-07T15:38:16Z")

</div>

tl;dr: how do I set the scatter plot y-axis and heatmap colorbar range so they stay the same (0-100) regardless of filter inputs? I’ve tried explicitly setting 1) tickvals/ticktext and 2) the colorbar rgb values.

- 

Longer version:

I’ve created a multi-page analytics dash app with filters that culminate into a heatmap and scatter graph (among other visuals).

I’m having a variation on the same issue with both visuals. In analytics/data science, it’s important to maintain a consistent output range in order to safeguard from skewing the interpretation of the visualizations.

With the heatmap, the colorbar changes to reflect the range of the heatmap values. I’ve tried explicitly declaring the color scale and the colorbar tickvals/ticktext to no avail.

```auto
@app.callback(Output('units_graph', 'figure'),
              [Input('store', 'data'),
               Input('facility_names', 'value'),
               Input('unit_names', 'value')])
              
def make_units_graph(dataf, facility, units): 
    
    #dff = filter_dataframe(facility, units, topics, cms, start, end)
    dff = pd.DataFrame.from_records(dataf, columns=cols)
    dff = dff.groupby(by=['Unit Location', 'Received Date'],as_index=False)['Top Response %'].mean()

    #dff['Top Response %'] = dff['Top Response %']*100
    #dff['Top Response %'] = dff['Top Response %'].round()
    dff = dff.set_index('Received Date')
             
    dff['QY'] = pd.to_datetime(dff.index).sort_values().to_period('Q') 

    table = pd.pivot_table(dff, index='Unit Location',
                           columns='QY', values='Top Response %', aggfunc={'Top Response %':np.mean}) #, fill_value=0)

    #color_scale = cl.scales['11']['div']['RdYlGn']
    
    color_scale = [
        [0, 'rgb(165,0,38)'], #0 
        [.1, 'rgb(215,48,39)'], #.1
        [.2, 'rgb(244,109,67)'], #.2
        [.3, 'rgb(253,174,97)'], #.3
        [.4, 'rgb(254,224,139)'], #.4
        [.5, 'rgb(255,255,191)'], #.5 
        [.6, 'rgb(217,239,139)'], #.6
        [.7, 'rgb(166,217,106)'], #.7
        [.8, 'rgb(102,189,99)'], #.8
        [.9, 'rgb(26,152,80)'], #.9
        [1., 'rgb(0,104,55)'], #1
        ]

    heat = go.Heatmap(
           z=table.values.tolist(),
           x=table.columns.astype(str),
           y=table.index, colorscale = color_scale,
           colorbar = dict(tickvals=[0, .2, .4, .6, .8, 1],
                           ticktext = ['0%', '20%', '40%', '60%', '80%', '100%'],
                           ),
                          )
        
    layout = go.Layout(
        title = facility + ' Unit Ratings', 
        hovermode='closest',
        orientation = 90,
        autosize = True,
        xaxis= {'title': ''}
    )

    return go.Figure(data=heat, layout=layout)

```

output:  
 ![heatmap1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/bcf2f52d17cdba9e66077f067cb4f5dec9606524.png)  
 ![heatmap2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d3b65dc1bee9b1af84f52ada52c840b04f3c1d29.png)

I also tried the tickvals/ticktext with the scatter plot to no avail (only copying layout code here):

```auto
layout = go.Layout(
        title = 'Facility Scores', 
        hovermode='closest',
        orientation = 90,
        autosize = True,
        xaxis= {'title': ''},
        yaxis = go.layout.YAxis(
                tickmode = 'array',
                tick0 = 0,
                dtick = 20,
                tickvals = [0, 20, 40, 60, 80, 100],
                ticktext = ['0%', '20%', '40%', '60%', '80%', '100%'],
                ),
            )

```

Output:  
 ![scatter2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/9dbc863af86e8388ee1982192daf4455ed1ca295.png)

Please help!

side note: as a data scientist, I love working with dash \<3

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [October 8, 2019, 2:00am UTC](https://community.plotly.com/t/setting-consistent-scatter-plot-y-axis-range-and-heatmap-colorbar-range/29670/2 "2019-10-08T02:00:18Z")

</div>

Hi @beccamayers for the `Heatmap` you need to set the `zmin` and `zmax` value as in

```auto
import plotly.graph_objects as go
import numpy as np
z = np.random.random((5, 5)) + 1
fig = go.Figure(go.Heatmap(z=z, zmin=0, zmax=3))
fig.show()

```

For the Scatter plot, it’s the `range` parameter of `yaxis`:

```auto
yaxis = dict(range=(0, 100), ...)

```

Hope his helps.

---

<div class="post-metadata">

**Author:** ![beccamayers](https://avatars.discourse-cdn.com/v4/letter/b/e47c2d/32.png) [@beccamayers](https://community.plotly.com/u/beccamayers)\
**Post date:** [October 8, 2019, 3:09pm UTC](https://community.plotly.com/t/setting-consistent-scatter-plot-y-axis-range-and-heatmap-colorbar-range/29670/3 "2019-10-08T15:09:48Z")

</div>

> [@Emmanuelle](#):
>
> zmin=0, zmax=3

Thank you, Emmanuelle. Your advice worked for the scatter plot and the heatmap.