How can you show from 0,0 (or the lowest negative point) to 8,8 (or the highest data point) on the chart x,y while also showing the full chart?
var data = [
{
x: [3, 4, 5, 6, 7, 8],
y: [3, 4, 5, 6, 7, 8],
type: 'scatter'
}
];
var layout = {
// autosize: true,
// rangemode: "tozero",
width: 500,
height: 500,
autoscale: false,
xaxis: { autorange: false },
yaxis: { autorange: false },
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
If you enable autorange it shows the data, but not 0,0.
If you disable autorange it shows 0,0 but not the data.
Here is a working demo: https://codepen.io/Xeoncross/pen/MRREXq
Your data is all there and showing it is just "hidden" because of the default zoom level. If you want all of the data points to show at once by default you can set a range in your x and y axis.
Also, setting a range will not affect your zooming in future uses.
Basically you can set the range min and max to be 0 and your highest value.
xaxis: { autorange: false, range:[0, 10]},
yaxis: { autorange: false, range:[0, 10]},
In the following snippet I made two variables to track the x and y max and add 2. This will ensure there is a buffer of 2 on the top to show all of the data points.
var data = [
{
x: [3, 4, 5, 6, 7, 8],
y: [3, 4, 5, 6, 7, 8],
type: 'scatter'
}
];
var xMax = data[0].x[data[0].x.length - 1] + 2;
var yMax = data[0].y[data[0].y.length - 1] + 2;
var layout = {
// autosize: true,
// rangemode: "tozero",
width: 500,
height: 500,
autoscale: false,
xaxis: { autorange: false, range:[0, xMax]},
yaxis: { autorange: false, range:[0, yMax]},
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- jquery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
</body>
You can just set the rangemode to 'tozero' and enable autorange for each axis:
var data = [
{
x: [3, 4, 5, 6, 7, 8],
y: [3, 4, 5, 6, 7, 8],
type: 'scatter'
}
];
var layout = {
width: 500,
height: 500,
autoscale: false,
xaxis: { rangemode:'tozero', autorange:true},
yaxis: { rangemode:'tozero', autorange:true}
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- jquery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
</body>
See the official Plotly examples.
Related
I want to plot two axis (bar + scatter) on a plotly chart with javascript, but I can't get the zero baseline of the second y-axis to align with the first axis.
Here is the result of the current version:
The Zero-line of the right y-axis (the scatter line) is higher than the zero-line of the left y-axis. I would want to have them on the same height in the plot, basically overlapping.
I create the Plotly object like this:
const trace1 = { x: dates, y: y1, name: 'item', type: 'bar' };
const trace2 = { x: dates, y: y1_cumsum, name: 'Total', yaxis: 'y2', type: 'scatter' };
Plotly.newPlot(MYDIV, [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
I tried to change position in the config, but this does only affect the x-position, not where the y-axis starts. I can't find any suitable attribute in the docs (https://plotly.com/javascript/reference/layout/yaxis/) that would achieve that.
How can I set the position of the second y-axis to be the same as the first one?
Thanks.
Assuming you don't have negative values in your data, you can set layout.yaxis.rangemode = 'tozero'for one or both of your axes.
const trace1 = {
x: [3, 4, 5],
y: [0, 15, 13],
mode: 'markers+lines',
type: 'scatter',
yaxis: 'y2'
};
const trace2 = {
x: [3, 4, 5],
y: [1, 0, 3],
type: 'bar'
};
Plotly.newPlot('myDiv', [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right',
rangemode: 'tozero'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
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; }
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.
I am using plotly javascript to draw some plots. But what I actually need is the url and I don’t really need the ploly to draw it on the web.
Here is an example, https://codepen.io/slfan2013/pen/xpWMyW. What I really need is the url and I don’t want the plot show on the website. How to do that? Thanks!
You don't need to actually plot the plot, you can pass the plotting data in Plotly.toImage, like:
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, 10],
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: 'Line and Scatter Plot'
};
Plotly.toImage({
data: data,
layout: layout
}, {
height: 600,
width: 800
})
.then(
function(url) {
console.log(url) // this is what i really need!! I dont want it to be ploted~!
}
);
<head>
<!-- Plotly.js -->
<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>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>
let me know if it helped !!!
Here is my solution, you can set the div CSS property display:none so that the graph is not shown. Then use plotly.purge() to remove the generated graph after the required content is obtained!
So to summarize, the graph is created(but not visible), the url is obtained, then the graph is purged!
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, 10],
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: 'Line and Scatter Plot'
};
Plotly.newPlot('myDiv', data, layout).then(
function(gd) {
Plotly.toImage(gd, {
height: 600,
width: 800
})
.then(
function(url) {
console.log(url); // this is what i really need!! I dont want it to be ploted~!
Plotly.purge('myDiv');
}
)
});;
#myDiv {
display: none;
}
<head>
<!-- Plotly.js -->
<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>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>
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
}
};