[Dash Bar chart] Customise axis unit font color by condition

📊 Plotly Python
1

Hi
I am trying to plot a bar chart.
my dataframe is like

df = pd.DataFrame({
    'direct': ['offer', 'offer', 'bid', 'bid'], 
    'price': [100, 99, 98, 97], 
    'qty': [10000, 213, 99, 123], 
    'color': ['red', 'red', 'green', 'green']
})

The code to plot bar chat is like

# RENDER ORDER BOOK CHART !
def render_ask_chart(df):
    chart = go.Figure(
        data=[go.Bar(
 
            x=df['qty'],
            y=df['price'],
            marker_color=df['color'],
            orientation='h',
 
            width=0.3,
            textposition='outside',
            insidetextfont=dict(family='Times', size=13, color='white'),
            showlegend=False),
        ],

        layout=go.Layout(
            xaxis=dict(autorange="reversed", title=dict(text='Volume', font=dict(size=50)),
                       tickfont_size=28),
 
            yaxis=dict(title='PRICE', side='right'),
        )
    )
 
    chart.update_layout(barmode='stack',
                        height=800, margin=dict(t=0,b=0,l=0,r=0))
    return chart

The code works fine and the bar chat looks like below.
image

However, I also want to change the color of unit font in Y axis. I want to change color of axis unit in ‘Offer’ area into ‘red’ . i.e. numbers 265, 270, 275, 280 and 285 into red color. Like the following.
image

Also I want axis unit in ‘Bid’ area into ‘green’, i.e. numbers 260, 255 and 250 into green color.

What syntax should I add to layout ? Thanks.

2

Hi,

If you don’t mind manipulating the ticks array manually, you could use something like this:

midpoint = 262.5 # following your example
tickvals = [250, 255, 260, 265, 270, 275 280] # must be set manually

ticktext = [f"<span style='color: {'green' if t <= midpoint else 'red'}'>{t}</span>" for t in tickvals]

fig.update_yaxes(
   tickmode='array', 
   tickvals=tickvals,
   ticktext=ticktext, 
)

Wrapping the text in a HTML span element does the trick.

Otherwise, you could use two yaxis and have individual traces for bid and ask, but it gets much more complicated IMO.

Hope this helps! :smiley:

EDIT: Fixed undefined ticks.

2 Likes
3

:grin:Thanks for replying @jlfsjunior

It seems ‘ticks’ is not defined (?)

4

It should be tickvals. I fixed my answer. Does it work now?

5

Hmmm…

File "/home/Tristansun/.conda/envs/project/lib/python3.6/site-packages/pandas/core/generic.py", line 1330, in __nonzero__
    f"The truth value of a {type(self).__name__} is ambiguous. "

ValueError: The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all().

I think the issue is at ticktext …
THanks

6

Which line does the error gets raised?

7

Thanks Jose.

8

Is tickvals a list or a pd.DataFrame in your case? Could you share the portion of the code where you define midpointand tickvals, so I can have a better idea of what’s going on?

1 Like
9

Thank you @jlfsjunior

The issue has been resolved. You code works like a charm!

My fault. The midpoint variable was mistakenly coded.

Thanks again !

1 Like