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.
Related
As shown in codepen below, text value for trace 1 is being trimmed as it is close to chart border.
Need to show these numbers above everything else. Have tried setting z-index. Didn't worked.
https://codepen.io/satishvarada/pen/yLVoqqo
var trace1 = {
x: [1, 2, 3, 4],
y: [16, 16, 16, 16],
type: 'scatter',
text:[16, 16, 16, 16],
textposition:'top',
mode:'lines+markers+text'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode:'lines+markers+text'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
I'm not a plotly user, but here is my try:
The problem:
Plotly has a default height of 450px and it also uses some default values regarding its layout settings which can be found at the documentation here. Since you are trying to plot something with smaller height (350px), you can adjust a little bit the default layout values to make the text fit better. Below, I have just set smaller margin values, for example 40 instead of 80,80,80,100 which are the defaults and it seems to work.
Solution:
var layout = {
autosize: true,
height: 350,
margin: {
l: 40,
r: 40,
b: 40,
t: 40,
pad: 0
},
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);
(notice that I set the height at the layout object and I have removed it from the style property of your div)
Working example:
var trace1 = {
x: [1, 2, 3, 4],
y: [16, 16, 16, 16],
type: 'scatter',
text:[16, 16, 16, 16],
textposition:'top',
mode:'lines+markers+text'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode:'lines+markers+text'
};
var data = [trace1, trace2];
// var data = [trace1];
var layout = {
autosize: true,
height: 350,
margin: {
l: 40,
r: 40,
b: 40,
t: 40,
pad: 0
},
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
try this.
.plot { clip-path: none; }
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>
I'am willing to display two legends (relative and absolute scales) on a graphic using plotly js. To do so I may use this piece of code:
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'absolute',
type: 'scatter'
};
var trace2 = {
x: [1, 2, 3],
y: [4, 5, 6],
name: 'relative',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis',
yaxis: {title: 'absolute'},
yaxis2: {
title: 'relative',
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);
But it basically draws twice the same line, which I don't want. Is their a cheaper way to add a scale + legend on the right side of my graph ?
Not with plotly.
Using a enhanced chart library such as ngx-charts however, may solve your problem
How does on remove the title from a plotly js chart?
Example chart I have is as follows
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv" style="width: 800px; height: 400px;"></div>
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers'
};
var trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: 'lines'
};
var trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers'
};
var data = [ trace1, trace2, trace3 ];
var layout = {
title:false
};
Plotly.newPlot('myDiv', data, layout);
</script>
This chart will have a title "false", I have also tried
var layout = {
showtitle:false
}
setting the title to null: title:'' or simply removing the title line, doesn't display a title, but the title area which is approxiamtely 50px in height above the chart reserved for the title remains, how do I remove this title area?
By removing the title from the layout config it will no longer render it. However, the margins are still configured to create the space for it. You will need to override those default margins as explained here.
I have created a jsFiddle showing that config applied to generate the desired output.
This is the meat of it:
var layout = {
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
}
};
I'm currently trying to plot two different sets of data to create a visualization for the data we are processing.
Essentially, one set of data will be a cross-section of a river (width, depth).
The other set of data consists of water levels and the times those levels were recorded. (depth, time)
I'm currently plotting each in individual graphs, but need to make the plot overlay the water level data onto the cross-section data. This would require multiple X-Axes since the range is not the same. Is this possible in plotly? I've seen a video online of someone using Plotly's data editor, but haven't found much in terms of using their API.
Also, I know that one set of data is in meters, the other is in feet -- these data are being used as an example, the final result will both be displayed in feet.
#emackey answer does not produce multiple x-axes. This is a working syntax that shows two different dataset on a same graph with one y axis and two x-axes.
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [12, 13, 14],
y: [4, 5, 6],
name: 'yaxis2 data',
xaxis: 'x2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
yaxis: {title: 'yaxis title'},
xaxis2: {
title: 'xaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'x',
side: 'top'
}
};
Plotly.newPlot('myDiv', data, layout);
This will produce the following graph.This link will help you for further documentation.
This might be possible using subplots. Here's an example with a shared Y axis, and independent X axes.
var trace1 = {
x: [1, 2, 3],
y: [4, 3, 2],
xaxis: 'x2',
type: 'scatter',
name: 'trace1'
};
var trace2 = {
x: [200, 300, 400],
y: [2, 3, 4],
xaxis: 'x3',
type: 'scatter',
name: 'trace2'
};
var data = [trace1, trace2];
var layout = {
xaxis2: {
domain: [0.0, 0.45]
},
xaxis3: {
domain: [0.55, 1]
}
};
Plotly.newPlot('myDiv', data, layout);