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.
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.
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()
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).
