I tried everything to set a background color in a plot.ly
chart but unfortunately so far without success.
My plot needs to look similar to this one. So it has swimming lines look between specific values on the y-axis. This can also be done with background image and fixed heights if easier? Any exampple how can i set repeating bg?
Also I tried to do this with Canvas but i had lot of problems spawning a canvas object for the chart.
My code so far looks like this:
(function($){
var layout = {
yaxis: {
fixedrange: true,
range: [0, 250]
},
xaxis: {
fixedrange: true
},
};
var options = {
scrollZoom: false,
showLink: false,
modeBarButtonsToRemove: [
'sendDataToCloud',
'zoom2d',
'pan',
'pan2d',
'autoScale2d',
'lasso2d',
'autoScale2d',
'resetScale2d',
'toggleSpikelines',
'dragmode'
]
};
var x = [
"2017-06-01 03:41:49",
"2017-06-02 13:07:46",
"2017-06-03 23:45:51",
"2017-06-04 11:29:26",
"2017-06-05 18:39:31",
"2017-06-06 23:53:27",
"2017-06-07 11:40:05",
"2017-06-08 21:44:24",
"2017-06-09 09:37:45",
];
var y = [
"100",
"120",
"67",
"160",
"88",
"95",
"134",
"55",
"199",
];
var data = [{
x: x,
y: y,
type: 'scatter',
name: 'Levels',
mode: 'markers',
marker: {
size: 16
}
}];
Plotly.newPlot('myDiv', data, layout, options);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>