Plotly.js - Reversing the horizontal bar chart in plotly

0
votes

I am new to plotly and am working of a bar chart example. What I want to do is have the bar chart run from right to left. Here is a link to my jsfiddle.

https://jsfiddle.net/ksaluja/w0cx3sw1/1/

Currently it is going the default way from right to left. Thanks!

index.html

<div id="tester" style="width:600px;height:250px;"></div>

scripts.js

var data = [{
  type: 'bar',
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'monkeys'],
  orientation: 'h'
}];

Plotly.newPlot('tester', data);
1
bar-chartplotly

1 Answers

2
votes

You need to use the autorange: reversed property of xaxis in layout object.

Refer the below example.

JSFiddle Demo

JS:

var data = [{
  type: 'bar',
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'monkeys'],
  orientation: 'h'
}];

var layout = {
    xaxis:{
        autorange:'reversed'
    },
    yaxis:{
      side:'right'
    }
}

Plotly.newPlot('tester', data, layout);

References:

  1. Plotly reversed axis

  2. Plotly Autorange