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

Set overlaying on the second axis to draw both traces in the same plotting area. The overlaying axis places its ticks at the base axis's tick positions, labeled with its own range — see Tick Positions on Overlaying Axes to give it an independent grid instead.

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

Tick Positions on Overlaying Axes

An axis that overlays another axis defaults to tickmode 'sync': it draws its ticks and gridlines at the base axis's positions and computes the labels from its own range, so the two axes share one grid. Set tickmode: 'auto' on the overlaying axis to let it choose its own tick positions instead, which draws a second, independent set of gridlines.

Prior to Plotly.js v4, 'auto' was the default on overlaying axes. When the base axis is type: 'category' or 'multicategory', 'auto' is still the default.

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: 'Independent Ticks on an Overlaying Axis'},
  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',
    tickmode: 'auto'
  }
};

Plotly.newPlot('myDiv', data, layout);