jcadima
7/26/2016 - 8:38 PM

Plot.ly data axis options and examples

Plot.ly data axis options and examples

new_gist_file.js
content_copyfile_download
// API EXAMPLE
https://plot.ly/javascript/axes/


// FULL EXAMPLE

<head>
  <!-- chart.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"></div>

</body>


<script>
	
var trace1 = {
  x: [1, 2, 3],
  y: [2, 5, 3],
  name: 'yaxis1 data',
  type: 'scatter'
};


var trace2 = {
  x: [1, 2, 3],
  y: [30000, 10000, 50000],
  name: 'yaxis3 data',
  yaxis: 'y3',
  type: 'scatter'
};



//var data = [trace1, trace2, trace3, trace4];
var data = [trace1, trace2];

var layout = {
  title: 'multiple y-axes example',
  width: 600,
  xaxis: {
    domain: [0.3, 0.6], // the longer the gap, the wider the graph will be
    dtick:1, // will show x axis point by units, not broken into fractions
  },
  
  yaxis: {
    title: 'yaxis title',
    titlefont: {color: '#1f77b4'},
    tickfont: {color: '#1f77b4'},
    range:[0, 10]
  },

  
  
  yaxis3: {
    title: 'yaxis3 title',
    titlefont: {color: '#d62728'},
    tickfont: {color: '#d62728'},
    anchor: 'x',
    overlaying: 'y',
    side: 'right',
    range:[0,60000]
  }
  
 
  
  
};

Plotly.newPlot('myDiv', data, layout);	
</script>



/*
  OPTION EXAMPLES FOR AXIS
*/
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    autotick: false,
    ticks: 'outside',
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: '#000'
  },
  yaxis: {
    autotick: false,
    ticks: 'outside',
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: '#000'
  }
};
Plotly.newPlot('myDiv', data, layout);