# Setting global styles for plotly charts

**URL:** <https://community.plotly.com/t/setting-global-styles-for-plotly-charts/14213>\
**Category:** Dash Python\
**Created:** [October 4, 2018, 9:29am UTC](https://community.plotly.com/t/setting-global-styles-for-plotly-charts/14213 "2018-10-04T09:29:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![drkane](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/drkane/32/4339_2.png) [@drkane](https://community.plotly.com/u/drkane)\
**Post date:** [October 4, 2018, 9:29am UTC](https://community.plotly.com/t/setting-global-styles-for-plotly-charts/14213/1 "2018-10-04T09:29:47Z")

</div>

Hi there

I’m building a dashboard using Dash, and I’d like to be able to set global styles for the `dcc.Graph` components - particularly setting the font family, color, size etc. What’s the easiest way to set this for all components?

I’ve tried to add a `font={'family': 'New Font'}` attribute at various places when the `dcc.Graph` component is being used, but none of them seem to change the font family for the charts.

Thanks

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [October 4, 2018, 11:01am UTC](https://community.plotly.com/t/setting-global-styles-for-plotly-charts/14213/2 "2018-10-04T11:01:59Z")

</div>

The beautiful thing about dash components are that they are essentially dictionary objects which means that they can be copied with minor tweaks to the `key: value` pairs. Borrowing from [this](https://github.com/plotly/dash-recipes/blob/master/copy-figure.py) recipe, here is how I’d create a global font for my figures.

Note that using `deepcopy` is subtle, but necessary. Since layouts are nested dictionaries, we want to make sure that we recursively copy the entire element.

```auto
from copy import deepcopy

GLOBAL_LAYOUT = dict(
    titlefont=dict(
        family = 'Balto',
        size = 25,
        color = '#6f199c'
    )
)

figure_1 = {
    'data': [{
      'x': [1, 2, 3, 4],
      'y': [12, 9, 15, 12],
      'mode': 'lines+markers',
      'type': 'bar'
    }],
    'layout': deepcopy(GLOBAL_LAYOUT)
}

figure_2 = {
    'data': [{
      'x': [1, 2, 3, 4],
      'y': [12, 9, 15, 12],
      'mode': 'lines+markers',
      'type': 'scatter'
    }],
    'layout': deepcopy(GLOBAL_LAYOUT)
}

# Use following recipe to overwrite/create any new layout properties
figure_1['layout']['title'] = 'Bar chart'
figure_2['layout']['title'] = 'Scatter'

app = dash.Dash( __name__ )
app.layout = html.Div([
    dcc.Graph(
        id='graph-1',
        figure=figure_1
    ),
    dcc.Graph(
        id='graph-2',
        figure=figure_2
    )
])

```

Hope that helps!

---

<div class="post-metadata">

**Author:** ![mrmr](https://avatars.discourse-cdn.com/v4/letter/m/f08c70/32.png) [@mrmr](https://community.plotly.com/u/mrmr)\
**Post date:** [October 4, 2018, 12:55pm UTC](https://community.plotly.com/t/setting-global-styles-for-plotly-charts/14213/3 "2018-10-04T12:55:10Z")

</div>

I would like to point out that in some patterns you may want to just apply changes to the layout, therefore this `dict`-like behavior is extremly useful. You can use maps to filter keys and props you want to inherit from predefined layouts, etc.

For example, the given example with applying only font face and color, and maintaining individual size per figure:

```auto
GLOBAL_FONT= dict(
        family = 'Balto',
        color = '#6f199c'
)

figure_1 = {
    'data': [{
      'x': [1, 2, 3, 4],
      'y': [12, 9, 15, 12],
      'mode': 'lines+markers',
      'type': 'bar'
    }],
    'layout': {'titlefont':{'size':25}}
}

figure_2 = {
    'data': [{
      'x': [1, 2, 3, 4],
      'y': [12, 9, 15, 12],
      'mode': 'lines+markers',
      'type': 'scatter'
    }],
    'layout': {'titlefont':{'size':16}}
}
figure_1['layout']['titlefont'].update(**GLOBAL_FONT)
figure_2['layout']['titlefont'].update(**GLOBAL_FONT)

```

---

<div class="post-metadata">

**Author:** ![drkane](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/drkane/32/4339_2.png) [@drkane](https://community.plotly.com/u/drkane)\
**Post date:** [October 4, 2018, 4:40pm UTC](https://community.plotly.com/t/setting-global-styles-for-plotly-charts/14213/4 "2018-10-04T16:40:09Z")

</div>

Thanks so much @mrmr and @mbkupfer - very speedy and helpful answers, exactly what I was looking for.