# PlotlyJS: customizing subplot figure titles from facet categories
**URL:** https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713
**Category:** Visualization
**Tags:** plotting, plotlyjs
**Created:** [June 13, 2022, 11:32pm UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713 "2022-06-13T23:32:32Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@VivMendes](https://discourse.julialang.org/u/VivMendes)
#### Post date: [June 13, 2022, 11:32pm UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/1 "2022-06-13T23:32:32Z")
Hi everyone,
I am trying to adapt a piece of code from Plotly into PlotlyJS. This code allows editing the titles of individual subplots produced with `facet_row` and `facet_col` by changing the default format. I have tried hard, but somehow I failed to translate the code.
The MWE is as follows. With the code:
```julia
using PlotlyJS
using DataFrames
using CSV
df_tips =CSV.read("tips.csv" , delim=';' , DataFrame)
fig = plot(df_tips, x=:total_bill, y=:tip, facet_col=:sex, color=:smoker, mode="markers")
```
and with the `tips.csv` dataset (from [here](https://github.com/plotly/datasets/blob/master/tips.csv) ), I can generate the plot below:
I need to remove the “facet\_col” name: `sex=`, which appears in all subplots. In this simple example, this repetition is irrelevant, but in figures with many subplots, this particular characteristic turns out to be quite disturbing.
There is a discussion of this problem [here](https://community.plotly.com/t/changing-label-of-plotly-express-facet-categories/28066/2), and on the Plotly website [here](https://plotly.com/python/facet-plots/#controlling-facet-ordering) there is an explanation of how it can be implemented:
```julia
import plotly.express as px
fig = px.scatter(px.data.tips(), x="total_bill", y="tip", facet_col="smoker")
fig.for_each_annotation(lambda a: a.update(text=a.text.split("=")[-1]))
fig.show()
```
I am missing how to adapt the third code line above to the context of PlotlyJS:
```julia
fig.for_each_annotation(lambda a: a.update(text=a.text.split("=")[-1]))
```
Help will be very much appreciated. Thanks.
---
### Author:  [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [June 14, 2022, 5:04am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/2 "2022-06-14T05:04:24Z")
You can customise the label with e.g. `labels=Dict(:sex => "V")`
```julia
fig = plot(df_tips, x=:total_bill, y=:tip, facet_col=:sex, color=:smoker, mode="markers",
labels=Dict(:sex => "V"))
```
The `=` remains, however, in this instance.
---
### Author:  [@VivMendes](https://discourse.julialang.org/u/VivMendes)
#### Post date: [June 14, 2022, 8:33am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/3 "2022-06-14T08:33:37Z")
@jd-foster, that helps a little, but it looks awkward to see a useless `=` in all subplots. Thanks for helping.
---
### Author:  [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [June 14, 2022, 9:12am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/4 "2022-06-14T09:12:46Z")
Ok, try this one?:
```julia
fig = plot(df_tips, Layout(); x=:total_bill, y=:tip, facet_col=:sex, color=:smoker, mode="markers")
for sp in fig.plot.layout.annotations
sp.text = split(sp.text,"=")[end]
end
display(fig)
```
---
### Author:  [@VivMendes](https://discourse.julialang.org/u/VivMendes)
#### Post date: [June 14, 2022, 9:33am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/5 "2022-06-14T09:33:39Z")
@jd-foster, sorry, it still comes out exactly as my initial plot, in VSCode.
---
### Author:  [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [June 14, 2022, 9:43am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/6 "2022-06-14T09:43:10Z")
Did you get a new plot with `display(fig)`?
---
### Author:  [@VivMendes](https://discourse.julialang.org/u/VivMendes)
#### Post date: [June 14, 2022, 10:36am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/7 "2022-06-14T10:36:04Z")
Yes, I did get a new plot, but it looks exactly equal to the one above.
---
### Author:  [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [June 14, 2022, 10:51am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/8 "2022-06-14T10:51:12Z")
I’m not sure why we have different results then. I’m using `PlotlyJS v0.18.8` in VSCode.
---
### Author:  [@VivMendes](https://discourse.julialang.org/u/VivMendes)
#### Post date: [June 14, 2022, 11:09am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/9 "2022-06-14T11:09:27Z")
I am on a Windows 10 machine, Julia 1.7.1, using PlotlyJS v0.18.8, while VSCode is 1.68.0.
I restarted VSCode to avoid some possible strange conflicts. Used exactly your code:
```julia
fig = plot(df_tips, Layout(); x=:total_bill, y=:tip, facet_col=:sex, color=:smoker, mode="markers")
for sp in fig.plot.layout.annotations
sp.text = split(sp.text,"=")[end]
end
display(fig)
```
and my output is this:
Thank you very much for helping.
---
### Author:  [@jd-foster](https://discourse.julialang.org/u/jd-foster)
#### Post date: [June 14, 2022, 11:27am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/10 "2022-06-14T11:27:18Z")
It looks like you are using a pop-up window instead of the VSCode Julia Plots panel?
For some reason, please do `relayout!(fig)` instead of `display(fig)` in this case.
---
### Author:  [@VivMendes](https://discourse.julialang.org/u/VivMendes)
#### Post date: [June 14, 2022, 11:53am UTC](https://discourse.julialang.org/t/plotlyjs-customizing-subplot-figure-titles-from-facet-categories/82713/11 "2022-06-14T11:53:55Z")
Congrats, you did it. It works by adding `relayout!(fig)` and calling the `fig` again at the end. Thanks a lot. This turnaround is extremely useful when dealing with large panel data sets.
For posterity, the code that works in VSCode, with an external plots window, is the solution provided by @jd-foster above:
```julia
fig = plot(df_tips, Layout(); x=:total_bill, y=:tip, facet_col=:sex, color=:smoker, mode="markers")
for sp in fig.plot.layout.annotations
sp.text = split(sp.text,"=")[end]
end
relayout!(fig)
fig
```
with no more `sex=` in the plot:
