Multiple Axes in JavaScript
How to make a graph with D3.js-based multiple axes in javascript.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: {text: 'Double Y Axis Example'},
yaxis: {
title: {
text: 'yaxis title'
}
},
yaxis2: {
title: {
text: 'yaxis2 title',
font: {color: 'rgb(148, 103, 189)'}
},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);
Click to copy
var trace1 = {
x: [1, 2, 3],
y: [4, 5, 6],
name: 'yaxis1 data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [40, 50, 60],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var trace3 = {
x: [4, 5, 6],
y: [40000, 50000, 60000],
name: 'yaxis3 data',
yaxis: 'y3',
type: 'scatter'
};
var trace4 = {
x: [5, 6, 7],
y: [400000, 500000, 600000],
name: 'yaxis4 data',
yaxis: 'y4',
type: 'scatter'
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
title: {
text: 'multiple y-axes example',
font: {color: '#1f77b4'}
},
width: 800,
xaxis: {domain: [0.3, 0.7]},
yaxis: {
title: {
text: 'yaxis title',
font: {color: '#1f77b4'}
},
tickfont: {color: '#1f77b4'}
},
yaxis2: {
title: {
text: 'yaxis2 title',
font: {color: '#ff7f0e'}
},
tickfont: {color: '#ff7f0e'},
anchor: 'free',
overlaying: 'y',
side: 'left',
position: 0.15
},
yaxis3: {
title: {
text: 'yaxis4 title',
font: {color: '#d62728'}
},
tickfont: {color: '#d62728'},
anchor: 'x',
overlaying: 'y',
side: 'right'
},
yaxis4: {
title: {
text: 'yaxis5 title',
font: {color: '#9467bd'}
},
tickfont: {color: '#9467bd'},
anchor: 'free',
overlaying: 'y',
side: 'right',
position: 0.85
}
};
Plotly.newPlot('myDiv', data, layout);
Click to copy
