Develop Reference

Plotly: How to display a bar chart over a scatter plot?

I'm using plotly.js to do some data visualization. I need to display an opaque filled-area scatter plot behind a bar chart - something like this - but no matter how much I play with the bar chart's opacity or the order of my data array, the filled-area plot is placed on top of the bar chart.
This is what my code looks like:
<script>
var trace2 = {
x: [1, 2, 3, 4, 5],
y: [120, 180, 290, 150, 110],
name: 'Type 1',
type: 'bar'
};
var trace5 = {
x: [1, 2, 3, 4, 5],
y: [75, 48, 38, 61, 52],
name: 'Type 2',
fill: 'tozeroy',
fillcolor: 'rgb(235, 185, 10)',
type: 'scatter',
mode: 'none'
};
var data1 = [trace5, trace2];
var layout = {
xaxis: {
showdividers: true,
dividercolor: 'grey',
dividerwidth: 2
},
yaxis: {title: '<b>Data</b>', side: 'right'}
};
Plotly.newPlot('myDiv', data1, layout);
</script>

Plotly.js modebar groups icons and places it over legend

Here is the picture of my problem. As you can see, my modebar is appearing as a grouped set of icons and is placing it over the legend. I just copy and pasted some example code from their site using example data. I have no other css affecting this at all. Below is the blob of code I am using.
The similar post here shows what it SHOULD look like, they are all in a single row and out of the way of the legend.
How do I make my modebar look like the one in the second link?
<div id="myDiv"></div>
<script>
var trace1 = {
x: [0, 1, 2],
y: [10, 11, 12],
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [100, 110, 120],
yaxis: 'y2',
type: 'scatter'
};
var trace3 = {
x: [3, 4, 5],
y: [1000, 1100, 1200],
yaxis: 'y3',
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {
yaxis: {domain: [0, 0.33]},
legend: {traceorder: 'reversed'},
yaxis2: {domain: [0.33, 0.66]},
yaxis3: {domain: [0.66, 1]}
};
Plotly.newPlot('myDiv', data, layout, {displaylogo: false});
</script>

Official "answer" for acceptance: this is usually due to external CSS.

How to create a horizontal threshold line in plotly js?

I am creating a simple line graph using plotly JS. The code is something like below:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"X-Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
}
}
Plotly.newPlot(myDiv,[trace1],layout);
Now I want to create a horizontal line across the graph, parallel to x-axis which I want to span the entire graph. For this I added 'shapes' in layout something like below:
var layout = {
xaxis:{
title:"X_Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
},
shapes: [
{
type: 'line',
x0: 2,
y0: 12.0,
x1: 3,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
};
Adding the 'shapes' parameter creates a horizontal value only between point 2 and 3 on the x-axes which I have specified .
My question is how to get the horizontal line span the entire graph without depending on x-axis value? Any help will be appreciated.

You could set xref to paper which tells Plotly not to rely on the x-axis coordinates but relative to the whole graph, i.e. 0 to 1.
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: 12.0,
x1: 1,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
}
Plotly.newPlot(myDiv,[trace1],layout);
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Heatmap with colour each for multiple ranges of values in plotly

I have a annotated heatmap using plotly in the following fiddle https://jsfiddle.net/9ds7mryr/5/
My intention is to have three colours for three individual ranges
<0.75 #FFA500
>0.75 and <0.90 rgb(255,0,0)
>0.90 #F0E7E7
However, right now I get the same colour for some of the values even though they are different if slightly.
How can I ensure values of the same range have the same colour?

Try changing your colorscale to
[
[0, '#FFA500'],
[0.1, '#FFA500'],
[0.2, '#FFA500'],
[0.3, '#FFA500'],
[0.4, '#FFA500'],
[0.74,'#FFA500'],
[0.75, 'rgb(255,0,0)'],
[0.89, 'rgb(255,0,0)'],
[0.90, '#F0E7E7'],
[0.95, '#F0E7E7'],
[1, '#F0E7E7']
]
The colorscale needs to be between 0 and 1, i.e. your values will be automatically normalized to be between those values. Since your values start higher than 0 and lower than 1 they will be shifted. You can change this behavior with zmin and zmax.
var xValues = ['A', 'B', 'C', 'D', 'E', 'max', 'min'];
var yValues = ['W'];
var zValues = [
[0.80, 0.110, 0.220, 0.74, 0.90, 1, 0]
];
var colorscaleValue = [
[0, '#FFA500'],
[0.1, '#FFA500'],
[0.2, '#FFA500'],
[0.3, '#FFA500'],
[0.4, '#FFA500'],
[0.74,'#FFA500'],
[0.75, 'rgb(255,0,0)'],
[0.89, 'rgb(255,0,0)'],
[0.90, '#F0E7E7'],
[0.95, '#F0E7E7'],
[1, '#F0E7E7']
];
var data = [{
x: xValues,
y: yValues,
z: zValues,
type: 'heatmap',
colorscale: colorscaleValue,
showscale: true,
}];
var layout = {
title: 'Annotated Heatmap',
annotations: [],
xaxis: {
ticks: '',
side: 'top'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
width: 700,
height: 700,
autosize: true
}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv">

Bar overlay filled scatter

Whenever I fill a scatter its drawn over the top of the bars on a multi chart type graph.
See example here
http://codepen.io/anon/pen/JXgNBG
var trace1 = {
x: [0, 1, 2, 3, 4, 5],
y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
type: 'scatter',
fill: 'tozeroy'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5],
y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
type: 'bar'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
Any ideas how to draw the bars over the filled area on the scatter? I would like the bars drawn over the top of the filled area to make them stand out.