On this subject, the English documentation only contains code and execution results, It was a little difficult to understand, so I will leave the explanation.
This is a JavaScript document, but you can use it as a reference when writing in Python.
In this multiple-custom-sized-subplots </ b> item When displaying a plurality of graphs in one given area of the above-mentioned use 1. Arrangement and size </ b> are set.
You can check the drawing of JS and HTML code with CodePen immediately, so please give it a try.
var plot1 = {
x: [1, 2],
y: [1, 2],
type: 'scatter',
name: '(plot1)'
};
var plot2 = {
x: [1, 2],
y: [1, 2],
type: 'scatter',
name: '(plot2)',
xaxis: 'x2',
yaxis: 'y2'
};
var plot3 = {
x: [1, 2],
y: [1, 2],
type: 'scatter',
name: '(plot3)',
xaxis: 'x3',
yaxis: 'y3'
};
var data = [plot1, plot2, plot3];
var layout = {
title: 'Customize the size of multiple plots',
xaxis: {
domain: [0, 0.45],
anchor: 'y1'
},
yaxis: {
domain: [0, 1],
anchor: 'x1'
},
xaxis2: {
domain: [0.55, 1],
anchor: 'y2'
},
yaxis2: {
domain: [0.55, 1],
anchor: 'x2'
},
xaxis3: {
domain: [0.75, 1],
anchor: 'y3'
},
yaxis3: {
domain: [0, 0.45],
anchor: 'x3'
},
};
Plotly.newPlot('myDiv', data, layout);
Description in Layout below
xaxis: {
domain: [0, 0.45],
anchor: 'y1'
},
yaxis: {
domain: [0, 1],
anchor: 'x1'
},
When the longest of each of the horizontal (x) and vertical (y) of the given drawing area is 1 </ b> Specify as a decimal value.
In the plot1 example above, The x-axis domain: [0, 0.45] </ b> is in the range 0 to 0.45 </ b> The y-axis domain: [0, 1] </ b> is supposed to be in the range 0 to 1 </ b>.
Note: If you have any questions about how to handle multiple graphs, see here in Plotly's JavaScript documentation [Try It On Code Pen]. It is recommended to check the operation.
Recommended Posts