# Plots plotlyjs subplots: linking x axis across columns of subplots

**URL:** <https://discourse.julialang.org/t/plots-plotlyjs-subplots-linking-x-axis-across-columns-of-subplots/79122>\
**Category:** Visualization\
**Tags:** plotting, plots, plotlyjs\
**Created:** [April 6, 2022, 8:00pm UTC](https://discourse.julialang.org/t/plots-plotlyjs-subplots-linking-x-axis-across-columns-of-subplots/79122 "2022-04-06T20:00:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rjgill](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rjgill/32/35266_2.png) [@rjgill](https://discourse.julialang.org/u/rjgill)\
**Post date:** [April 6, 2022, 8:00pm UTC](https://discourse.julialang.org/t/plots-plotlyjs-subplots-linking-x-axis-across-columns-of-subplots/79122/1 "2022-04-06T20:00:17Z")

</div>

Is it possible to link x-axis across columns of subplots with Julia plots (without linking their y-axis)?

```julia
using Plots
plotlyjs() # or pyplot()
plot(rand(100, 2), layout = (1,2), link = :x)

```

If I zoom or pan on one of the sub plots, the x-axis of the other subplot is not updated.

![Figure_1](https://global.discourse-cdn.com/julialang/original/3X/3/6/3686b9a38e0d19aea13f7fca75a82c6c543b4a33.png)

Looking at the [documentation](https://docs.juliaplots.org/latest/generated/attributes_plot/), the `link` keyword argument to `plot(..)` seems to only support linking x axis across rows. It seems like there should be another option to link all x axis together, something like a `link = :x_all`.

I know matplotlib supports this via the following (in python) using the `sharex` keyword argument:

```julia
fig, ax = plt.subplots(1,2, sharex=True) 

```

---

<div class="post-metadata">

**Author:** ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)\
**Post date:** [April 7, 2022, 5:33am UTC](https://discourse.julialang.org/t/plots-plotlyjs-subplots-linking-x-axis-across-columns-of-subplots/79122/2 "2022-04-07T05:33:12Z")

</div>

Not exactly the answer to your question, but I cannot generate the plot you want using `PlotlyJS` directly:

```julia
using PlotlyJS, WebIO

plot([scatter(y=rand(100), xaxis="x", yaxis="y"),
      scatter(y=rand(100), xaxis="x", yaxis="y2")],
     Layout(grid=attr(rows=2, columns=1)))

plot([scatter(y=rand(100), xaxis="x", yaxis="y"),
      scatter(y=rand(100), xaxis="x", yaxis="y2")],
     Layout(grid=attr(rows=1, columns=2)))

```

In the first plot, the `x` are linked, in the second, only the second plot appears.

I have to say that I have never got comfortable using subplots in `PlotlyJS`.

---

<div class="post-metadata">

**Author:** ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)\
**Post date:** [June 27, 2022, 8:07am UTC](https://discourse.julialang.org/t/plots-plotlyjs-subplots-linking-x-axis-across-columns-of-subplots/79122/3 "2022-06-27T08:07:52Z")

</div>

I got more comfortable with subplotting in `PlotlyJS` 😀.

The problem with my solution is that one cannot use `grid` and share the y-axis across rows: see [Layout in JavaScript](https://plotly.com/javascript/reference/layout/#layout-grid-subplots). The alternative is to use `domain` in conjunction with `matches` to link axes of different names. You also need to use `anchor` to display the `y2` axis starting at the `x2` axis.

```julia
using WebIO, PlotlyJS

plot([scatter(x=1:100, y=rand(100), xaxis="x", yaxis="y"),
      scatter(x=101:200, y=rand(100), xaxis="x2", yaxis="y2")],
     Layout(xaxis=attr(domain=[0, 0.45]),
            yaxis=attr(domain=[0, 1]),
            xaxis2=attr(domain=[0.55, 1], matches="x"),
            yaxis2=attr(domain=[0, 1], anchor="x2")))

```

Note that despite the x axes having different ranges, the displayed ranges are adjusted as to show all points.