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
11.522.533.54404550556044.555.56
yaxis datayaxis2 dataDouble Y Axis Exampleyaxis titleyaxis2 title
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
24644.555.56404550556040k45k50k55k60k400k450k500k550k600k
yaxis1 datayaxis2 datayaxis3 datayaxis4 datamultiple y-axes exampleyaxis titleyaxis2 titleyaxis4 titleyaxis5 title