<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
Plotly.plot('graph', [{
x: [1, 2, 3],
y: [2, 1, 3]
}], {
sliders: [{
pad: {t: 30},
len: 0.5,
x: 0.5,
currentvalue: {
xanchor: 'right',
prefix: 'color: ',
font: {
color: '#888',
size: 20
}
},
steps: [{
label: 'red',
method: 'restyle',
args: ['line.color', 'red']
}, {
label: 'green',
method: 'restyle',
args: ['line.color', 'green']
}, {
label: 'blue',
method: 'restyle',
args: ['line.color', 'blue']
}]
}],
updatemenus: [{
pad: {t: 60, r: 30},
type: 'buttons',
xanchor: 'left',
yanchor: 'top',
x: 0,
y: 0,
direction: 'right',
buttons: [{
label: 'red',
method: 'restyle',
args: ['line.color', 'red']
}, {
label: 'green',
method: 'restyle',
args: ['line.color', 'green']
}, {
label: 'blue',
method: 'restyle',
args: ['line.color', 'blue']
}]
}]
}, {showSendToCloud: true});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.