# PlotlyJS: how to make a responsive chart?

**URL:** <https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942>\
**Category:** General Usage\
**Tags:** plotting\
**Created:** [August 24, 2021, 8:05pm UTC](https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942 "2021-08-24T20:05:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![VivMendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vivmendes/32/16477_2.png) [@VivMendes](https://discourse.julialang.org/u/VivMendes)\
**Post date:** [August 24, 2021, 8:05pm UTC](https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942/1 "2021-08-24T20:05:14Z")

</div>

Hi,

I am trying to make a plot produced by PlotlyBase (in Pluto), or by PlotlyJS in VSCode, **responsive** to the size of the chart when is exported as an HTML file or when its size is changed in the Electron window. In the default case, when the size of the plot is changed, the font size (x-axis, y-axis, and title) does not.

**Edited.  
Sorry, this question was framed in a lousy way. Please see my second entry below.**

I looked at the documentation and tried to replicate the example below, but I mistake somewhere. Help will be very much appreciated. Thanks.

Apparently, this is the type of code that makes plots responsive using plotly:

```julia
var trace1 = {
    type: 'bar',
    x: [1, 2, 3, 4],
    y: [5, 10, 2, 8],
    marker: {
        color: '#C8A2C8',
        line: {
            width: 2.5
        }
    }
};

var data = [trace1];

var layout = {
  title: 'Responsive to window size!',
  font: {size: 18}
};

Plotly.newPlot('myDiv', data, layout, {responsive: true});

```

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [August 24, 2021, 8:27pm UTC](https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942/2 "2021-08-24T20:27:32Z")

</div>

> [@PlotlyJS vs Plots+plotlyjs()](https://discourse.julialang.org/t/plotlyjs-vs-plots-plotlyjs/46179/7):
>
> The correct solution is not to set the height and width, but to set autosize: layout = Layout(;autosize = true, xaxis = attr(title="x", range=[0.0, L]), yaxis = attr(title = "F", range=[-1.0, 1.0])) Then the figure is responsive during the simulation as well as after. [s]

---

<div class="post-metadata">

**Author:** ![VivMendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vivmendes/32/16477_2.png) [@VivMendes](https://discourse.julialang.org/u/VivMendes)\
**Post date:** [August 24, 2021, 10:31pm UTC](https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942/3 "2021-08-24T22:31:11Z")

</div>

Hi @PetrKryslUCSD , thank you for helping. I may have misled the readers by the title of my question. In fact, I do not know very well how to **frame** my question without being too long or too dull. Let me see if I can do better this time.

The plots I get from Pluto (PlotlyBase) and VSCode (PlotlyJS) are indeed responsive. When I change the size of the window, the chart adapts to the new size. It works perfectly well. Every element of the plot adapts to the new window size **except** the size of fonts of the x-axis, y-axis, and legends. I know that I can change the font’s size by using the Layout:

```julia
layout = Layout(; font_size = 20, 
           title_text="Shreck and friends",
           title_x = 0.5, 
           titlefont_size="30") 

```

However, once these font sizes have been set, they will remain precisely with the same size independently of the size of the chart. If I need to project, i.e., a heatmap with 24 countries, and I expand the static html file to take the all monitor, the names of the countries will be very difficult to read because they will become tiny compared to the size of the entire chart.

Maybe, what I was looking for is impossible to achieve: somehow, locking the font size to the size of the chart. For example, in the figure below, I present the same plot in two completely different sizes. Everything adjusts to the resize of the charts except for the font sizes.

Thanks a lot.

 ![aaa](https://global.discourse-cdn.com/julialang/original/3X/6/c/6c7b77cee0e1d4ac827304c74409308ceea32e58.png)

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [August 24, 2021, 10:34pm UTC](https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942/4 "2021-08-24T22:34:02Z")

</div>

I see. I’m afraid I misunderstood the original question. I have no idea how to do this.

---

<div class="post-metadata">

**Author:** ![VivMendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vivmendes/32/16477_2.png) [@VivMendes](https://discourse.julialang.org/u/VivMendes)\
**Post date:** [August 24, 2021, 10:42pm UTC](https://discourse.julialang.org/t/plotlyjs-how-to-make-a-responsive-chart/66942/5 "2021-08-24T22:42:19Z")

</div>

Well, I think the way I initially framed the question may have led any reader to raise the question: “What the heck is this guy looking for”. Sorry.