CODEWITHSUNDEEP
pythonchartsfontsformattingplotly
Ads
Ads

Reputation: 93

Using multiple font sizes in Plotly chart title (Python)

I have a chart title which spans multiple lines using line breaks.

I'd like to have everything after the first line in a smaller font (effectively a subtitle), but can't figure out a way to do this.

Couldn't see any similar question on here.

import plotly.graph_objs as go
data=[]
layout = go.Layout(title='line1' + '<br>' +  'line2')
fig = go.FigureWidget(data=data, layout=layout)
fig

Any ideas appreciated!

Upvotes: 9

Views: 22087

Answers (2)

yoonghm
yoonghm

Reputation: 4625

You may use the following method:

import plotly.express as px
import plotly.data as data

df = data.gapminder()

fig = px.histogram(df, x='continent')

fig.update_layout(
    height=400,
    title=dict(
        text='<b>Life Expectancy - Our World in Data</b>',
        x=0.5,
        y=0.95,
        font=dict(
            family="Arial",
            size=20,
            color='#000000'
        )
    ),
    xaxis_title="<b>Continent</b>",
    yaxis_title='<b>Average Age</b>',
    font=dict(
        family="Courier New, Monospace",
        size=12,
        color='#000000'
    )
)
fig.show()

Figure using original solution]1

Update: 16-March-2023:

import plotly.express as px
import plotly.data as data

df = data.gapminder()

fig = px.histogram(df, x='continent')

fig.update_layout(
    height=400,
    title=dict(
        text='<b><span style="font-family: Courier New, Monospace; font-size: 30pt">Life Expectancy</span> - <span style="font-family: Cursive;"> Our World in Data</span></b>',
        x=0.5,
        y=0.95,
    ),
    xaxis_title="<b>Continent</b>",
    yaxis_title='<b>Average Age</b>',
    font=dict(
        family="Courier New, Monospace",
        size=12,
        color='#000000'
    )
)
fig.show()

Figure with new solution

Upvotes: 8

nicolaskruchten
nicolaskruchten

Reputation: 27370

Yes, you can use <span> tags with CSS, like this:

import plotly.graph_objs as go
data=[]
layout = go.Layout(title='line1' + '<br>' +  '<span style="font-size: 12px;">line2</span>')
fig = go.FigureWidget(data=data, layout=layout)
fig

enter image description here

Upvotes: 17

Related Questions