Multiple Axes in JavaScript

How to make a graph with D3.js-based multiple axes in javascript.

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

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);

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);