JavaScript > Subplots > Multiple Axes
Suggest an edit to this page

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. Try Plotly Studio now.

Two Y-Axes 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3],\n y: [40, 50, 60],\n name: 'yaxis data',\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [2, 3, 4],\n y: [4, 5, 6],\n name: 'yaxis2 data',\n yaxis: 'y2',\n type: 'scatter'\n};\n\nvar data = [trace1, trace2];\n\nvar layout = {\n title: {text: 'Double Y Axis Example'},\n yaxis: {\n title: {\n text: 'yaxis title'\n }\n },\n yaxis2: {\n title: {\n text: 'yaxis2 title',\n font: {color: 'rgb(148, 103, 189)'}\n },\n tickfont: {color: 'rgb(148, 103, 189)'},\n overlaying: 'y',\n side: 'right'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Multiple Y-Axes 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3],\n y: [4, 5, 6],\n name: 'yaxis1 data',\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [2, 3, 4],\n y: [40, 50, 60],\n name: 'yaxis2 data',\n yaxis: 'y2',\n type: 'scatter'\n};\n\nvar trace3 = {\n x: [4, 5, 6],\n y: [40000, 50000, 60000],\n name: 'yaxis3 data',\n yaxis: 'y3',\n type: 'scatter'\n};\n\nvar trace4 = {\n x: [5, 6, 7],\n y: [400000, 500000, 600000],\n name: 'yaxis4 data',\n yaxis: 'y4',\n type: 'scatter'\n};\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n title: {\n text: 'multiple y-axes example',\n font: {color: '#1f77b4'}\n },\n width: 800,\n xaxis: {domain: [0.3, 0.7]},\n yaxis: {\n title: {\n text: 'yaxis title',\n font: {color: '#1f77b4'}\n },\n tickfont: {color: '#1f77b4'}\n },\n yaxis2: {\n title: {\n text: 'yaxis2 title',\n font: {color: '#ff7f0e'}\n },\n tickfont: {color: '#ff7f0e'},\n anchor: 'free',\n overlaying: 'y',\n side: 'left',\n position: 0.15\n },\n yaxis3: {\n title: {\n text: 'yaxis4 title',\n font: {color: '#d62728'}\n },\n tickfont: {color: '#d62728'},\n anchor: 'x',\n overlaying: 'y',\n side: 'right'\n },\n yaxis4: {\n title: {\n text: 'yaxis5 title',\n font: {color: '#9467bd'}\n },\n tickfont: {color: '#9467bd'},\n anchor: 'free',\n overlaying: 'y',\n side: 'right',\n position: 0.85\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">