7/26/2016 - 8:38 PM

## Plot.ly data axis options and examples

Plot.ly data axis options and examples

``````// API EXAMPLE
https://plot.ly/javascript/axes/

// FULL EXAMPLE

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

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