Can you make one tick bold and can you define custom gridlines and place those gridlines wihtout

đź“Š Plotly Python
1

I have two problems I’m unable to solve and I hope somebody has a hint.

The layout now looks like this:

ibcs-1
ibcs-11423Ă—634 78.8 KB

Problem 1: is it possible to make only the word Total in the lower left bold, like the values in that row? The app consists of two barcharts and a listgroup. I tried the same lambda function on the word “Total” as I used for the rest, adjusting pre and suffix, it did not work and I don’t see a font-weight property.

Problem 2: the gridlines in the black chart. When I give a range for the gridlines y=1.5, y=2.5 etc, Total is not displayed in the chart. What I actually want is those lines between the bars (y=1.5 to y=7.5 step 1) and keep Total and the bar above Total. I tried horizontal lines but a white horizontal line of 1px is still darker than a lightgrey gridline.

I hope somebody has a hint, besides that maybe this is not a good idea :grinning: The code of the first barchart (black one):

Code

def create_fig_money(data):

#VISUAL PRINTS REVENUE PER CATEGORY THIS MONTH
#INPUT IS DATA = SUMMARIZED CATEGORY, REVENUE, DELTA PM AND DELTA PM%

fig = go.Figure()
fig.add_trace(go.Bar(
y=data['categoryName'],
x=data['barLength'],

text=data['nettoPrice'],
orientation='h',
#the bars
marker=dict(
    color='rgba(0, 0, 0, .9)',
    cornerradius=15,
    line=dict(color='rgba(0, 0, 0, 1.0)', 
              width=1)
    )
))
#labels at the end of bar, lambda function to create a bold for the total value

fig.update_traces(texttemplate=data['categoryName'].apply(lambda x: '<b>%{text:.2s}</b>' if x == 'Total' else '%{text:.2s}'), textposition='outside')

fig.update_xaxes(showticklabels=False)


fig.update_yaxes( dict(ticksuffix="   " ),showgrid=True, gridwidth=1, gridcolor='LightGrey')
fig.update_layout(
    margin=dict(l=5, r=5, t=25, b=5),
    plot_bgcolor='white',
    title = {
         'text': 'AC',
         'y':1, # new
         'x':0.5,
         'xanchor': 'center',
         'yanchor': 'top' # new
        },
    

    )




fig.add_vline(x=0, line_dash="solid", line_width=1)
fig.add_hline(y=0.5, line_dash="solid", line_width=2)


return dcc.Graph(figure = fig)
2

Hello @marieanne

id did something like this in the past for the axis text. The values of the bart chart is a different story, though.

you could add the font-weight to the direct css.

fig.update_layout(
    xaxis={
        'tickmode': 'array', 
        'tickvals': [1, 2, 3],
        'ticktext': [
            'a',
            f"<span style='color:red; font-weight: bold'> b </span>",
            'c'
        ]
    }
)

I don´t understand the problem 2, unfortunately. You want to have lines between the bars?

1 Like
3

Hi @aimped, thank you for your answer. It works and gives me an alternative to style. But, I’m looking for a way to make only the “Total” tick bold, and leave the rest (other ticks on y-axis) alone.
I’ll experiment a bit further later today.

The second problem: what I mean, I’m looking for a way to have horizontal gridlines between the bars instead of in the middle plus, I only want to see this starting below “Dairy products” and ending above “Produce”. When I use horizontal lines for this, it looks ugly (too fat). When I create a range for drawing gridlines, the range is also interpreted as show/hide bars outside this range.

Thanks again for your reply, Marie-Anne

4

Problem one, make one tick bold, the rest not, is solved, it was a stackoverflow post.

    #all tickvalues y axis in an array to use to format
    tv =  data['categoryName'].to_numpy()
    #format all ticks Y axis
    tt = [format_prefix_ticktext_fig_money(member) for member in tv]

A function to do the formatting instead of trying to do it with lambda

def format_prefix_ticktext_fig_money(catname):
    if (catname == 'Total'):
        return f"<span style='font-weight:bold'> {catname}</span>   "
    else: return f"<span> {catname}</span>   "

figure update like this:

 
    fig.update_yaxes( dict(
        tickmode='array',
        tickvals=tv,
        ticktext=tt
    ),showgrid=False, gridwidth=1, gridcolor='LightGrey')

results in this :slight_smile:

plaatje
plaatje310Ă—346 15.1 KB

Update: and problem 2 solved, I can use the horizontal lines, it had something to do with the white template and adding opacity + line_color solved the problem:

    #opacity + line_color make the lines appear nice on the white template as they are meant to be
    fig.add_hline(y=0.5, line_dash="solid", line_width=1, opacity=1, line_color="Black")
    fig.add_hline(y=1.5, line_dash="solid", line_width=1,  opacity=1, line_color='#ded6ca')

results is this:

plaatje
plaatje455Ă—237 13.3 KB

1 Like