Draw a simple plotly line graph horizontally

Question

With the bar graph, you can add orientation: h to the trace.

Couldn't find a way to do that with line graph, so a basic graph like this one:

Can be rotated to look something like this (rotated in gimp...):

Answer 1

As far as I know there is no direct of doing so but you can take advantage of Plotly using D3 and the fact that all graphs are SVGs.

By applying rotate and transform to the plot itself you get the desired result.

Plotly.d3.selectAll(".subplot").filter(".xy").attr('transform', 'rotate(90) translate(0, -400)');

The class of the plot is "subplot xy" and 400 is the width of your plot (specified in the HTML definition of your div).

---

If you want to rotate the whole graph use:

Plotly.d3.selectAll(".main-svg").attr('transform', 'rotate(90) translate(0, -400)');

Probably the legend needs to be adjusted a bit afterwards:

Plotly.d3.selectAll(".legend").attr('transform', 'translate(100, 50)');

I'd recommend disabling the hoverinfo or modify it as well.

var layout = {hovermode: false};
Plotly.newPlot('myDiv', data, layout);

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);

//rotation happens here
Plotly.d3.selectAll(".subplot").filter(".xy").attr('transform', 'rotate(90) translate(0, -400)');

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 400px; height: 400px;"></div>

---