Related
I'm trying to find out how i can set the domain for a table in a 2x2 subplot in plotly (V4.14.3).
I thought the "domain" option in go.Table(domain=dict(x=[a,b],y=[c,d)) would be the right option but doesn't move while changing the values.
My goal is to have a fixed domain for the plots in the upper row and a dynamic table and legend in the lower one, so if i could variate the table position with a domain option it would be easy.
As you can see i set the domain in my code to domain=dict(x=[0.0, 1.0],y=[0.2, 0.8]) which is different to the result you can see in the attached picture.
Thank you very much in advance
import plotly.graph_objs as go
from plotly.subplots import make_subplots
# Testdata
Test_DataSets = ['Set1','Set2','Set3']
Test_DataVals = [2,3,4]
x = [1,2,3,4,5]
y = [2,5,7,9,6]
# Plots
fig = make_subplots(
rows=2, cols=2,
specs=[[{"type": "scatter"},{"type": "scatter"}],
[{"type": "table"},{"type": "scatter"}]
]
)
fig.add_trace(go.Scatter(x=x,y=y,
name= 'Testdata',
legendgroup = 'group'),1,1)
fig.add_trace(go.Scatter(x=x,y=y,
name= 'Testdata',
legendgroup = 'group'),1,2)
fig.add_trace(
go.Table(domain=dict(x=[0.0, 1.0],y=[0.2, 0.8]),
header=dict(
values=["DataSet", "Val"],
font=dict(size=10),
align="left"),
cells=dict(
values=[Test_DataSets,Test_DataVals]
)),
row=2, col=1
)
fig.show()
this the result
thats how it should be
I found the solution by myself...
the domain can be set with following code:
fig.update_traces(domain_x=[0,0.45], domain_y=[0,0.45], selector=dict(type='table'))
I am trying to figure out if there is a way to have the name of a Python plotly scatterpolar trace to always be visible, rather than having to hover over each trace on the graph. This is what I have so far in terms of code.
import plotly.graph_objects as go
categories = ['Passing', 'Dribbling', 'Shooting', 'Defense', 'Fitness']
fig = go.Figure()
fig.add_traces(go.Scatterpolar(
r=[6.33, 3.71, 0, 5.45, 5],
theta=categories,
fill='toself',
name='Team Average'
))
fig.add_traces(go.Scatterpolar(
r=[9.38, 2.86, 0, 5.0, 5.6],
theta=categories,
fill='toself',
name='Player Average'
))
fig.update_layout(
polar=dict(
radialaxis=dict(
visible=False,
range=[0,10]
)
),
showlegend=False
)
fig.show()
And this is what the current scatterpolar chart looks like when I run it. As you can see, it does not show the names of each of the traces, and only appears when I hover over each trace.
With a go.Scatterpolar chart, text annotations are difficult because you will need to specify the cartesian x- and y-coordinates for the text annotations. Polar coordinates for text annotations inside the chart are not yet available, at least according to the linked Plotly forum post. While you could convert the polar coordinates of each point to x- and y-coordinates, and then add text at each of these locations, this seems like a heavy handed solution unless it's really necessary.
One compromise would be to use px.line_polar to draw the chart, and use the text argument to specify what text gets added for each point. Unfortunately you can only choose one field from your data (in your case, you can choose to display the value that you are passing to parameter r, or the category that you are passing to parameter theta).
To make px.line_polar look like go.Scatterpolar, you will want to add filling between the lines. In addition, to add the second px.line_polar chart on top of the first one, you'll need to create a new figure, then add that figure's data as a trace. You will also need to manually specify the color of the second px.line_polar chart.
import plotly.express as px
import plotly.graph_objects as go
categories = ['Passing', 'Dribbling', 'Shooting', 'Defense', 'Fitness']
fig = go.Figure()
fig = px.line_polar(
{'Team Average':[6.33, 3.71, 0, 5.45, 5], 'direction':categories},
r="Team Average",
theta="direction",
start_angle=360,
line_close=True,
text="Team Average",
)
fig2 = px.line_polar(
{'Player Average':[9.38, 2.86, 0, 5.0, 5.6], 'direction':categories},
r="Player Average",
color_discrete_sequence=["salmon"]*5,
theta="direction",
start_angle=360,
line_close=True,
text="Player Average",
)
## add fig2 to fig
fig.add_trace(fig2.data[0])
fig.update_traces(textposition='top center', fill='toself')
fig.update_layout(
polar=dict(
radialaxis=dict(
visible=False,
range=[0,10]
)
),
showlegend=False
)
fig.show()
I know there is the hovertemplate/hover_text/ option for traces (marker/line) but I cannot find such a thing for shapes.
Is there a way to have a hover text pop up when moving over a shape? Maybe a workaround?
Example:
import plotly.graph_objects as go
fig = go.Figure()
fig.add_trace(go.Scatter(
x=[1.5, 3],
y=[2.5, 2.5],
text=["Rectangle reference to the plot",
"Rectangle reference to the axes"],
mode="markers",
))
fig.add_shape(
# Rectangle reference to the plot
type="rect",
xref="paper",
yref="paper",
x0=0.25,
y0=0,
x1=0.5,
y1=0.5,
line=dict(
color="LightSeaGreen",
width=3,
),
fillcolor="PaleTurquoise",
)
When I hover over the two points, I get a hover-template with information. How can I get something similar for the shape?
It seems that it's not possible to add hoverinfo to shapes directly. But you can obtain something very close to what seems to be the desired effect through the right combination of shapes and traces. The following plot is made from specifying two rectangles in a list like:
shapes = [[2,6,2,6],
[4,7,4,7]]
The rest of the code snippet is set up to be flexible with regards to the number of shapes, and the colors assigned to them and the corresponding traces to make that little dot in the lower right corners of the shapes.
Plot:
If this is something you can use, we can discuss ways to edit what is being displayed in the hoverinfo.
Complete code:
# Imports
import pandas as pd
#import matplotlib.pyplot as plt
import numpy as np
import plotly.graph_objects as go
import plotly.express as px
# shape definitions
shapes = [[2,6,2,6],
[4,7,4,7]]
# color management
# define colors as a list
colors = px.colors.qualitative.Plotly
# convert plotly hex colors to rgba to enable transparency adjustments
def hex_rgba(hex, transparency):
col_hex = hex.lstrip('#')
col_rgb = list(int(col_hex[i:i+2], 16) for i in (0, 2, 4))
col_rgb.extend([transparency])
areacol = tuple(col_rgb)
return areacol
rgba = [hex_rgba(c, transparency=0.4) for c in colors]
colCycle = ['rgba'+str(elem) for elem in rgba]
# plotly setup
fig = go.Figure()
# shapes
for i, s in enumerate(shapes):
fig.add_shape(dict(type="rect",
x0=s[0],
y0=s[2],
x1=s[1],
y1=s[3],
layer='above',
fillcolor=colCycle[i],
line=dict(
color=colors[i],
width=3)))
# traces as dots in the lower right corner for each shape
for i, s in enumerate(shapes):
fig.add_trace(go.Scatter(x=[s[1]], y=[s[2]], name = "Hoverinfo " +str(i + 1),
showlegend=False,
mode='markers', marker=dict(color = colors[i], size=12)))
# edit layout
fig.update_layout(yaxis=dict(range=[0,8], showgrid=True),
xaxis=dict(range=[0,8], showgrid=True))
fig.show()
I thought of a solution I am happy with.
Simply draw a shape. You won't be able to see a hover text. However, if you add a trace with a fill on top of the shape, then set the trace to opacity=0 you will see the hover text from the trace pop up when moving over the shape.
Again, thanks for your responses!
import plotly.graph_objects as go
# Draw shape (you won't be able to add a hover text for it)
fig = go.Figure()
fig.add_shape(
type="rect",
x0=0, y0=0,
x1=4, y1=3,
fillcolor='LightSkyBlue',
line_color='Blue',
name='Shape 1'
)
# Adding a trace with a fill, setting opacity to 0
fig.add_trace(
go.Scatter(
x=[0,0,4,4,0],
y=[0,3,3,0,0],
fill="toself",
mode='lines',
name='',
text='Custom text on top of shape',
opacity=0
)
)
fig.show()
I want to plot a chart with two subplots in plotly dash. My entire chart looks like this:
import pandas as pd
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from plotly.subplots import make_subplots
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv').iloc[:60]
fig = make_subplots(rows=2, cols=1, row_heights=[0.8, 0.2], vertical_spacing=0)
fig.add_trace(go.Candlestick(open=df['AAPL.Open'], high=df['AAPL.High'], low=df['AAPL.Low'], close=df['AAPL.Close'],
increasing_line_color='#0384fc', decreasing_line_color='#e8482c', name='AAPL'), row=1, col=1)
fig.add_trace(go.Scatter(y=np.random.randint(20, 40, len(df)), marker_color='#fae823', name='VO', hovertemplate=[]), row=2, col=1)
fig.update_layout({'plot_bgcolor': "#21201f", 'paper_bgcolor': "#21201f", 'legend_orientation': "h"},
legend=dict(y=1, x=0),
font=dict(color='#dedddc'), dragmode='pan', hovermode='x unified',
margin=dict(b=20, t=0, l=0, r=40))
fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
showspikes=True, spikemode='across', spikesnap='data', showline=False, spikedash='solid')
fig.update_yaxes(showgrid=False, zeroline=False)
fig.update_traces(xaxis='x', hoverinfo='none')
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.Div(dcc.Graph(id='chart', figure=fig, config={'displayModeBar': False}))])
if __name__ == '__main__':
app.run_server(debug=True, dev_tools_ui=False, dev_tools_props_check=False)
What I need is a so called crosshair that is common in trading charts. Basically it consists of two lines that are connected to x and y axes and moves with cursor. This is a screenshot from tradingview.com charts:
However in my chart there is a little icon that appears when the cursor is on candlesticks:
What I have found out so far is that when the cursor is on the scatter plot, the icon disappears and it works fine. I think that is because I set hovertemplate=[] in the scatterplot. I cannot do that in the candlestick plot because there is no such parameter for it. Moreover, this icon only appears if I set hovermode='x unified'. If I set it to x, the little icon doesn't appear. But I need it to be exactly like the tradingview.com example that I showed.
Is there any way to replicate that crosshair?
UPDATE 1:
I tried fig.update_layout(hoverdistance=0). But the problem is that when the cursor is not on the candlesticks, the crosshair is just not right. I took two screenshots: the first one is from tradingview.com charts and the second one is from my code with hoverdistance set to 0.
As can be seen, when the cursor is not on the candlesticks, in the first screenshot the crosshair is still correct. However, in the second screenshot it is just not working correctly. It only works if the cursor is on the candlesticks ONLY.
I just want to copy tradingview.com crosshair. Nothing less and nothing more.
UPDATE 2:
I think the answer could be on these plotly docs. I am working on it currently. Please share your comments about this update.
This should do it:
fig.update_layout(hoverdistance=0)
And setting spikesnap='cursor' for xaxes and yaxes.
These little adjustments will keep the crosshair intact and remove the little icon that has been bothering you.
From the docs:
Plot:
hoverdistance
Sets the default distance (in pixels) to look for data
to add hover labels (-1 means no cutoff, 0 means no looking for data).
This is only a real distance for hovering on point-like objects, like
scatter points. For area-like objects (bars, scatter fills, etc)
hovering is on inside the area and off outside, but these objects will
not supersede hover on point-like objects in case of conflict.
Complete code: (but with no dash elements)
import pandas as pd
import numpy as np
import plotly.graph_objs as go
from plotly.subplots import make_subplots
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv').iloc[:60]
fig = make_subplots(rows=2, cols=1, row_heights=[0.8, 0.2], vertical_spacing=0)
fig.add_trace(go.Candlestick(open=df['AAPL.Open'], high=df['AAPL.High'], low=df['AAPL.Low'], close=df['AAPL.Close'],
increasing_line_color='#0384fc', decreasing_line_color='#e8482c', name='AAPL'), row=1, col=1)
fig.add_trace(go.Scatter(y=np.random.randint(20, 40, len(df)), marker_color='#fae823', name='VO', hovertemplate=[]), row=2, col=1)
fig.update_layout({'plot_bgcolor': "#21201f", 'paper_bgcolor': "#21201f", 'legend_orientation': "h"},
legend=dict(y=1, x=0),
font=dict(color='#dedddc'), dragmode='pan', hovermode='x unified',
margin=dict(b=20, t=0, l=0, r=40))
fig.update_yaxes(showgrid=False, zeroline=False, showticklabels=False,
showspikes=True, spikemode='across', spikesnap='cursor', showline=False, spikedash='solid')
fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
showspikes=True, spikemode='across', spikesnap='cursor', showline=False, spikedash='solid')
fig.update_layout(hoverdistance=0)
fig.update_traces(xaxis='x', hoverinfo='none')
fig.show()
If you set hovermode='x' then you can format the style of the spike line like this:
fig.update_xaxes(spikecolor="grey",spikethickness=1)
UPDATE:
spikesnap='cursor' will get you closer, but not working exactly for the candlestick.
fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
showspikes=True, spikemode='across', spikesnap='cursor', showline=False,
spikecolor="grey",spikethickness=1, spikedash='solid')
fig.update_yaxes(showspikes=True, spikedash='solid',spikemode='across',
spikecolor="grey",spikesnap="cursor",spikethickness=1)
fig.update_layout(spikedistance=1000,hoverdistance=1000)
All the man too complex, the easiest way:
fig.update_layout(hovermode='x unified')
Docs for hovermode is here and python reference here
I am trying to change the background color in plotly, but after using layout function, I'm missing title from plotly.
layout = Layout(
paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)'
)
data['Country'].value_counts()[:10][::-1].iplot(kind="barh",bargap=.5, title="Top 10 countries faced terrorist attacks", colors="#182844", layout=layout)
You'll be better off using go.Figure() instead of iplot(). It's hard to make out what the problem is with your plot, but with an example from plot.ly/python/horizontal-bar-charts/ you can easily set both title and background color using fig.update_layout()
Plot:
Code:
import plotly.graph_objects as go
fig = go.Figure(go.Bar(
x=[20, 14, 23],
y=['giraffes', 'orangutans', 'monkeys'],
orientation='h'))
fig.update_layout(title='Title',
paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)')
fig.show()
I tried adding layout the the iplot itself and it worked. We can also adjust margin along with it.
Sample Code:
data['Nationality'].value_counts()[0:10][::-1].iplot(kind="barh",bargap=.5,
colors="mediumorchid", layout=Layout(paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)',
width=800, height=500,
title='Nationality of terrorist attacks',
margin=dict(l=200, r=50, t=80, b=50)))
enter image description here