PlotlyJS: how to make a responsive chart?

General Usage
1

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:

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});
2
3

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:

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
aaa1339×1323 139 KB

4

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

5

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.