Develop Reference

Plotly.js Axis Click/Drag Event

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>

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.

Multiple Y-Axis Legend on single data with plotly.js

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

jQplot line plot starts from x=0

I would like to create a line plot for a vector of y values. In the default situation, x should starts from 1. I am wondering is there a way to let x values start from 0?
Below is my code and demo:
$(document).ready(function() {
var s= [12, 45, 89, 181, 111, 147, 116]
$.jqplot('chart1', [s], {
seriesDefaults: {
showMarker:false,
pointLabels: { show:false } ,
},
axes: {
xaxis: {
label :'Time units',
pad: 0,
},
yaxis: {
label: 'Number of individuals',
pad: 0
}
},
legend: {
show: true,
location: 'nw',
placement: 'inside',
fontSize: '11px'
}
})
})
​

Edit: it is also necessary to set the data of x.
Here is the demo.

In the first paragraph of this link the author mentions that for what you are trying to achieve, you need an array of x,y data points (the ordered pairs themselves must be arrays too). So in your specific case this should give the desired effect:
var s= [[0, 12], [1, 45], [2, 89], [3, 181], [4, 111], [5, 147], [6, 116]];
For larger arrays of ordered pairs you can use a for loop to generate the ordered pair-arrays.