I'm just starting to learn to use Dash and currently have a chart up displaying user engagement on my website. However,
I can't seem to figure out how to style Dash components when it comes to colors and the Dash documentation doesn't seem to have anything on the topic. How do I change a series' colors from the default blue/orange/green? The code for the graph in question is below`
dcc.Graph(
id='average_engagement_graph',
figure={
'data': [
{'x': list(avg_df['day']), 'y': list(avg_df['countMessageIn']),
'type': 'bar', 'name': 'Incoming Messages from Users'},
{'x': list(avg_df['day']), 'y': list(avg_df['countMessageOut']),
'type': 'bar', 'name': 'Outgoing Message by Bot'},
],
'layout': {
'title': 'Average User-Bot Engagement by Day of Week',
'xaxis': {
'title': 'Day of the Week'
},
'yaxis': {
'title': 'Average Number of Messages'
},
}
}
),
For bar, you've got to add it to a key named marker.
dcc.Graph(
id='average_engagement_graph',
figure={
'data': [
{'x': list(avg_df['day']), 'y': list(avg_df['countMessageIn']),
'type': 'bar', 'name': 'Incoming Messages from Users'},
'marker' : { "color" : your_color_array}
{'x': list(avg_df['day']), 'y': list(avg_df['countMessageOut']),
'type': 'bar', 'name': 'Outgoing Message by Bot'},
'marker' : { "color" : your_color_array}
],
'layout': {
'title': 'Average User-Bot Engagement by Day of Week',
'xaxis': {
'title': 'Day of the Week',
},
'yaxis': {
'title': 'Average Number of Messages'
},
}
}
),
EDIT
It seems they have done a lot of edit and you can also do this...
colors = ['lightslategray',] * 5
colors[1] = 'crimson'
fig = go.Figure(data=[go.Bar(
x=['Feature A', 'Feature B', 'Feature C',
'Feature D', 'Feature E'],
y=[20, 14, 23, 25, 22],
marker_color=colors # marker color can be a single color value or an iterable
)])
Related
This is made using Dash.
I'm trying to move the annotations (number values for each bar) up 10px so I can read them.
I've tried marker, yshift (and a few others I cant recall) but none of them are seen as valid.
Cut down code:
import dash
from dash import dcc, html
from dash.dependencies import Output, Input
import pandas as pd
import csv
app.layout = html.Div([
#order of charts here affects display on page
#html.H1("USDT Market Percent change 5m, 1h, 24h"),
dcc.Graph(id='chart'),
html.Div(children=[
dcc.Graph(id='bar2', style={'display': 'inline-block'}),
dcc.Graph(id='bar', style={'display': 'inline-block'}),
]),
#dcc.Graph(id='chart2'),
dcc.Interval(id='interval', interval=29000, n_intervals=0),
])
def update_bar(value):
# Get the most recent value for columns 11-17
df = import_data()
most_recent = list(df.iloc[-1, 14:24])
previous = list(df.iloc[-2, 14:24])
last_update = df.iloc[-1, 0]
title = f"Percent Change Distribution \n "
fig = {
'data': [
{'x': df.columns[14:24], 'y': most_recent, 'type': 'bar'}
],
'layout': {
'title': title,
'xaxis': {'title': "% ranges", 'tickangle': 90, 'tickfont': {'size': 14, 'weight': 'bold'}},
'yaxis': {'title': "Number"},
'height': 450,
'width': 500,
'annotations': [
{'x': df.columns[14], 'y': most_recent[0], 'text': f" {most_recent[0]}", 'showarrow': False, 'font': {'size': 14, 'weight': 'bold'} },
{'x': df.columns[15], 'y': most_recent[1], 'text': f" {most_recent[1]}", 'showarrow': False },
{'x': df.columns[16], 'y': most_recent[2], 'text': f" {most_recent[2]}", 'showarrow': False },
{'x': df.columns[17], 'y': most_recent[3], 'text': f" {most_recent[3]}", 'showarrow': False },
{'x': df.columns[18], 'y': most_recent[4], 'text': f" {most_recent[4]}", 'showarrow': False },
{'x': df.columns[19], 'y': most_recent[5], 'text': f" {most_recent[5]}", 'showarrow': False },
{'x': df.columns[20], 'y': most_recent[6], 'text': f" {most_recent[6]}", 'showarrow': False },
{'x': df.columns[21], 'y': most_recent[7], 'text': f" {most_recent[7]}", 'showarrow': False },
{'x': df.columns[22], 'y': most_recent[8], 'text': f" {most_recent[8]}", 'showarrow': False },
{'x': df.columns[23], 'y': most_recent[9], 'text': f" {most_recent[9]}", 'showarrow': False },
]
}
}
return fig
I'd be very grateful for any clues.
I am new to python and trying to create dashboard and i want the graph to view side by side instead of one below another.
app = dash.Dash()
app.layout = html.Div(children=[
html.H1('Premium Dash Board'),
html.Div(children='Premium Queue'),
html.Div([
dcc.Graph(id='example',
figure={
'data':[
{'x': ASIN, 'y': Quan, 'type': 'bar', 'name': 'Quantity'},
{'x': ASIN, 'y':List_price, 'type': 'bar', 'name': 'Price'}
],
'layout': {
'title': 'ASIN vs Inventory & Price'
}
}),
],style={'display': 'inline-block'}),
html.Div([
dcc.Graph(id='example1',
figure={
'data': [
{'x': ASIN, 'y': Quan, 'type': 'line', 'name': 'Quantity'},
{'x': ASIN, 'y': List_price, 'type': 'line', 'name': 'Price'}
],
'layout': {
'title': 'ASIN vs Inventory & Price'
}
})
], style={'display': 'inline-block'})
],style={'width': '100%', 'display': 'inline-block'})
Please advise how to proceed.
If I run code on big monitor then I see plots side by side.
If I use smaller window then it automatically put second plot below.
But using 'width': '50%' I can get two plots side by side
import dash
import dash_html_components as html
import dash_core_components as dcc
import random
random.seed(0)
ASIN = list(range(100))
Quan = [random.randint(0, 100) for x in range(100)]
List_price = [random.randint(0, 100) for x in range(100)]
app = dash.Dash()
app.layout = html.Div(children=[
html.H1('Premium Dash Board'),
html.Div(children='Premium Queue'),
html.Div([
dcc.Graph(id='example',
figure={
'data':[
{'x': ASIN, 'y': Quan, 'type': 'bar', 'name': 'Quantity'},
{'x': ASIN, 'y': List_price, 'type': 'bar', 'name': 'Price'}
],
'layout': {
'title': 'ASIN vs Inventory & Price'
}
}),
],style={'width': '50%','display': 'inline-block'}),
html.Div([
dcc.Graph(id='example1',
figure={
'data': [
{'x': ASIN, 'y': Quan, 'type': 'bar', 'name': 'Quantity'},
{'x': ASIN, 'y': List_price, 'type': 'bar', 'name': 'Price'}
],
'layout': {
'title': 'ASIN vs Inventory & Price'
}
})
],style={'width': '50%','display': 'inline-block'}),
])
app.run_server()
TO create this image I used DevTools in Firefox and function to test page with devices which have different screen size - Ctrl+Shift+M
I am creating a Dash app in Python3. Trying to add in a horizontal line to a bar graph. The examples in the documentation are for line graphs, which have numeric x and y axis, whereas I have a categorical X-axis. The below code creates the graph successfully, but does not show the shape object. How can I add a horizontal line to this graph?
html.Div(
[ dcc.Graph(
id='example-graph-23',
figure={
'data': [
{'x': ['Overall', 'NBA', 'WWC', 'NFL'], 'y': [3,2,2.5],
'type': 'bar', 'name': 'Instagram'},
],
'layout': {
'yaxis' : dict(
range=[0, 4]
),
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
},
'shapes' : dict(type="line",
x0=0,
y0=2,
x1=5,
y1=2,
line=dict(
color="Red",
width=4,
dash="dashdot",
))
}
}
) ]
, className="four columns"
),
You can add a vertical line by adding x and y coordinates to the figure.data like this:
import dash
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash()
colors = {'background': 'white', 'text': 'black'}
app.layout = html.Div(
[ dcc.Graph(
id='example-graph-23',
figure={
'data': [
{'x': ['Overall', 'NBA', 'WWC', 'NFL'], 'y': [3,2,2.5],
'type': 'bar', 'name': 'Instagram'},
{'x': ['Overall', 'Overall'], 'y': [0, 4],
'type': 'line', 'name': 'v_line_1'},
{'x': ['NBA', 'NBA'], 'y': [0, 4],
'type': 'line', 'name': 'v_line_2'},
{'x': ['WWC', 'WWC'], 'y': [0, 4],
'type': 'line', 'name': 'v_line_3'},
],
'layout': {
'yaxis' : dict(
range=[0, 4]
),
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
},
'shapes' : dict(type="line",
x0=0,
y0=2,
x1=5,
y1=2,
line=dict(
color="Red",
width=4,
dash="dashdot",
))
}
}
)], className="four columns"
)
if __name__ == '__main__':
app.run_server(debug=True)
enter image description here
I get different results in the displayed chart when I use the highcharts option "chart" in chart_options. Example 1 will display the subtitle but not the background color. Example 2 will show the background color but not the subtitle. Anyone else encountered this behavior?
Python v2.7.5
Django v1.10
django-chartit v0.2.7
django-highcharts v0.1.7
Example 1: displays subtitle, not backgroundColor
#Create the PivotChart object
site_prod_pivotcht = PivotChart(
datasource = site_prod_ds,
series_options = [
{'options':{
'type': 'column',
'stacking': False},
'terms': [
'prod_value',
'wx_adj_value']}
],
chart_options =
{'title': {
'text': 'Actual versus Wx Adjusted Production Data'},
'subtitle': {
'text': report_range},
'backgroundColor': '#7FFFD4',
'xAxis': {
'title': {
'text': 'Group:Sites'}}
}
Example 2: displays backgroundColor, not subtitle
#Create the PivotChart object
site_prod_pivotcht = PivotChart(
datasource = site_prod_ds,
series_options = [
{'options':{
'type': 'column',
'stacking': False},
'terms': [
'prod_value',
'wx_adj_value']}
],
chart_options =
{'chart':{
'title': {
'text': 'Actual versus Wx Adjusted Production Data'},
'subtitle': {
'text': report_range},
'backgroundColor': '#7FFFD4',
'xAxis': {
'title': {
'text': 'Group:Sites'}}}
}
After a bit more trial and error, I found the following works as intended.
chart_options =
{'chart':{
'backgroundColor': '#7FFFD4',
'title': {
'text': 'Actual versus Wx Adjusted Production Data'}},
'subtitle': {
'text': report_range},
'credits': {
'enabled': False},
'xAxis': {
'title': {
'text': 'Group:Sites'}}
}
I am creating a loop of charts and I would like to keep specified color for each category so in every chart the same category is always represented by same color, but I am completly lost. Any help, thanks
cht = Chart(
datasource = ventasdata,
series_options =
[{'options':{'type': 'line','stacking': False, 'colors': ['#00cc00', '#ff5050','#00cc00']}, # Para area cambiar a 'type': 'area'
'terms':{
'mes': [
# 'cantidad_total_mes_2015',
'cantidad_acumulado_2015'],
'mes_2014': [
# 'cantidad_total_mes_2014',
'cantidad_acumulado_2014'],
'mes_2016': [
# 'cantidad_total_mes_2016',
'cantidad_acumulado_2016']
}}],
chart_options =
# {'colors': ['#00cc00','#ff5050','#3333ff'], 'title': {
{'mes': {
'color': '#00cc00'},
'cantidad_acumulado_2014': {
'color': ['#ff5050']},
'cantidad_acumulado_2016': {
'color': ['#3333ff']},
'terms':{
# 'colors': ['#00cc00','#ff5050','#3333ff']},
'colors': [['#00cc00'],'#ff5050','#3333ff']},
'title': {
# {'title': {
'text': titulo},
'xAxis': {
'title': {'text': 'MES'}}},
x_sortf_mapf_mts = (None, monthname, False))
return cht