turtle_in_mind
turtle_in_mind

Reputation: 1152

Plotly: Choose a different intersection of X and Y axes

In Plotly, in order to create scatter plots, I usually do the following:

fig = px.scatter(df, x=x, y=y)
fig.update_xaxes(range=[2, 10])
fig.update_yaxes(range=[2, 10])

I want the yaxis to intersect the xaxis at x=6. So, instead of left yaxis representing negative numbers, I want it to be from [2,6] After the intersection, right side of graph is from [6,10].

Likewise, yaxis from below axis goes from [2,6]. Above the xaxis, it goes from [6,10].

How can I do this in Plotly?

enter image description here

Upvotes: 3

Views: 1498

Answers (2)

mosc9575
mosc9575

Reputation: 6337

I think fig.add_hline() and fig.add_vline() is the function your need.

Example code

import plotly.express as px
import pandas as pd
df = pd.DataFrame({'x':[6,7,3], 'y':[4,5,6]})
fig = px.scatter(df, x='x', y='y')
fig.update_xaxes(range=[2, 10])
fig.update_yaxes(range=[2, 10])
fig.add_hline(y=4)
fig.add_vline(x=6)
fig.show()

Output plotly with shifted axes

Upvotes: 0

s3dev
s3dev

Reputation: 9681

Following on from my comment, as far as I am aware, what you're after is not currently available.

However, here is an example of a work-around which uses a shapes dictionary to add horizontal and vertical lines - acting as intersecting axes - placed at your required x/y intersection of 6.

Sample dataset:

import numpy as np

x = (np.random.randn(100)*2)+6
y1 = (np.random.randn(100)*2)+6
y2 = (np.random.randn(100)*2)+6

Example plotting code:

import plotly.io as pio

layout = {'title': 'Intersection of X/Y Axes Demonstration'}
shapes = []
traces = []

traces.append({'x': x, 'y': y1, 'mode': 'markers'})
traces.append({'x': x, 'y': y2, 'mode': 'markers'})

shapes.append({'type': 'line', 
               'x0': 2, 'x1': 10,
               'y0': 6, 'y1': 6})
shapes.append({'type': 'line', 
               'x0': 6, 'x1': 6,
               'y0': 2, 'y1': 10})

layout['shapes'] = shapes
layout['xaxis'] = {'range': [2, 10]}
layout['yaxis'] = {'range': [2, 10]}

pio.show({'data': data, 'layout': layout})

Output:

enter image description here

Comments (TL;DR):

The example code shown here uses the low-level Plotly API (plotly.io), rather than a convenience wrapper such as graph_objects or express. The reason is that I (personally) feel it's helpful to users to show what is occurring 'under the hood', rather than masking the underlying code logic with a convenience wrapper.

This way, when the user needs to modify a finer detail of the graph, they will have a better understanding of the lists and dicts which Plotly is constructing for the underlying graphing engine (orca).

Upvotes: 2

Related Questions