Cannot hide axis of scatter plot


#1

Hi,
I am using scatter plot to draw a array of circles. Everything looks good beside there is the axis appear even I tried to hide it as in image

Below is my code for the plot

    >  html.Div([dcc.Graph(id='scatterplot',
                 figure= {'data':[
                          go.Scatter(
                          x = coor_X,
                          y = coor_Y,
                          mode = 'markers',
                          marker = dict(
                                  size=30,
                                  color = 'rgb(137,175,178)'
                            ))],
                         'layout':go.Layout(
                                 width = 800,
                                 height = 600,
                                 title = 'Well Plate',
                                 xaxis = {'title':'Column',
                                          'showgrid':False},
                                 yaxis = {'title':'Row',
                                          'showgrid':False,
                                          'zeroline':False,
                                          'autorange':'reversed'})},
                config={
                        'displayModeBar': False
                        }
                )],style={'width':'48%','display':'inline-block'})

Beside that, I would like to know how to change the Xaxis so it does not show 0 and show every element 1, 2, 3 …

Thanks in advances.


#2

I think you need
´´´´
‘showline’: ‘False’
´´´


#3

I did not use those parameters for Y axis on the X axis and the X axis did not even show while the Y axis still exist. Please look at my updated small code.

‘layout’:go.Layout(
width = 800,
height = 600,
title = ‘Well Plate’,
xaxis = {‘title’:‘Column’,
‘showgrid’:False},
yaxis = {‘title’:‘Row’,
‘showgrid’:False,
‘showline’:False,
‘zeroline’:False,
‘autorange’:‘reversed’})},


#4

It works after I removed width = 800. It also show the Y axis if I use the ‘scaleratio’. As I understand, the axis appear when I try to force the ratio between X Axis and Y Axis.

Remove width but add scaleratio
‘layout’:go.Layout(
#width = 800,
height = 600,
title = ‘Well Plate’,
xaxis = {‘title’:‘Column’,
‘showgrid’:False},
yaxis = {‘title’:‘Row’,
‘showgrid’:False,
‘showline’:False,
‘zeroline’:False,
‘autorange’:‘reversed’,
‘scaleratio’:0.5
})


#5

I post the full code here, hope someone can help me verify this

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np
import pandas as pd
from pandas import DataFrame

# Launch the application:
app = dash.Dash()

WellPlateRow = 8
WellPlateColumn = 12

row_header = []
for letter in range(65, 65 + WellPlateRow):
    row_header.append(chr(letter))
    
column_header = []
for column in range(1,WellPlateColumn+1):
    column_header.append(column)

coor_X = column_header*8
coor_Y = []
for row in row_header:
    coor_Y.extend([row]*12)

# Create a Dash layout that contains a Graph component:
app.layout = html.Div([
            html.Div([
                    ],style={'width':'48%','display':'inline-block'}),
            html.Div([dcc.Graph(id='scatterplot',
                     figure= {'data':[
                              go.Scatter(
                              x = coor_X,
                              y = coor_Y,
                              mode = 'markers',
                              marker = dict(
                                      size=30,
                                      color = 'rgb(137,175,178)'
                                ))],
                             'layout':go.Layout(
                                     #width = 800,
                                     height = 600,
                                     title = 'Well Plate',
                                     xaxis = {'title':'Column',
                                              'showgrid':False},
                                     yaxis = {'title':'Row',
                                              'showgrid':False,
                                              'showline':False,
                                              'zeroline':False,
                                              'autorange':'reversed',
                                              'scaleratio':0.5
                                              })},
                    config={
                            'displayModeBar': False
                            }
                    )],style={'width':'48%','display':'inline-block'})
                             ])


# Add the server clause:
if __name__ == '__main__':
    app.run_server()

#6

Still need help. I posted the code. Can anyone help me?


#7

I’ve been rather busy at work, I will give it a glance when I have the time. You have not been forgotten. :slightly_smiling_face:


#8

Solution: under xaxis set '“zeroline”: False`.

I think the confusion might come from the naming. Although it’s not 100% intuitive, it is correct. The zeroline of the X axis is the vertical one, and for the Y axis, the horizontal one.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np
import pandas as pd
from pandas import DataFrame

# Launch the application:
app = dash.Dash()

WellPlateRow = 8
WellPlateColumn = 12

row_header = []
for letter in range(65, 65 + WellPlateRow):
    row_header.append(chr(letter))

column_header = []
for column in range(1, WellPlateColumn + 1):
    column_header.append(column)

coor_X = column_header * 8
coor_Y = []
for row in row_header:
    coor_Y.extend([row] * 12)

# Create a Dash layout that contains a Graph component:
app.layout = html.Div([
    html.Div([
    ], style={'width': '48%', 'display': 'inline-block'}),
    html.Div([dcc.Graph(id='scatterplot',
                        figure={'data': [
                            go.Scatter(
                                x=coor_X,
                                y=coor_Y,
                                mode='markers',
                                marker=dict(
                                    size=30,
                                    color='rgb(137,175,178)'
                                ))],
                            'layout': go.Layout(
                                # width = 800,
                                height=600,
                                title='Well Plate',
                                xaxis={'title': 'Column',
                                       'zeroline': False,
                                       'showgrid': False},
                                yaxis={'title': 'Row',
                                       'showgrid': False,
                                       'showline': False,
                                       'zeroline': False,
                                       'autorange': 'reversed',
                                       'scaleratio': 0.5
                                       })},
                        config={
                            'displayModeBar': False
                        }
                        )], style={'width': '48%', 'display': 'inline-block'})
])

# Add the server clause:
if __name__ == '__main__':
    app.run_server()

Boom! :slight_smile:


#9

@eliasdabbas: Thanks you very much. It works now :slight_smile:

Could you please answer the remain of my question too?


#10

Sure,

There are several ways to do it. The explicit way is, under xaxis you can set "tickmode": "array", which means that you will specify the ticks with an array.

Then you can set "tickvals": [1, 2, 3, 4, 5, 6] for example (also under xaxis).

"xaxis": {"tickmode": "array", "tickvals": [1, 2, 3, 4, 5, 6, 7, 8]}

If you don’t know beforehand what those values would be, you can simply set “tickvals” to be range(1, len(x), step) for example.

More details and other way to handle ticks here:

Good luck!


#11

@eliasdabbas: Thanks you made my day :slight_smile: