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
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>
I have multiple y-axis in a line chart. Only the last y-axis related grid lines are shown by default. If the user clicks on any other y-axis, grid lines for that y-axis should be shown. But I am unable to find any event in plotly.js which triggers when the axis is clicked or dragged.
Sorry, I can't comment yet. Here's a rather hacky way of registering clicks on yaxis labels. Not sure if that's helpful.
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {title: 'yaxis title'},
yaxis2: {
title: 'yaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('chart', data, layout);
var myPlot = document.getElementById('chart');
myPlot.on('plotly_afterplot', function(){
Plotly.d3.selectAll(".nsdrag.drag.cursor-ns-resize")
.on("click", function() {
var target = Plotly.d3.event.target;
console.log('clicked on', target.dataset.subplot);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script>
<div id="chart">
</div>
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>
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'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);