title: Render Jqplot Bar Graph Horizontally
body: <p>I have this jqplot bar graph. The current display of the bars are shown vertically, I wanted to display it horizontally.</p>
  
  <p>How do I set the jqplot properties so I can make the graph disply horizontally and preserve the output with the percent values? </p>
  
  <p>I hope you help me do this. Thanks :) </p>
  
  <p>Here is the code</p>
  
  <p><strong>Attached Scirpts</strong></p>
  
  <pre><code>&lt;!--[if lt IE 9]&gt;&lt;script language="javascript" type="text/javascript" src="../excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  &lt;script src="../jquery-1.4.4.min.js" language="javascript" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="../jquery.jqplot.js" language="javascript" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="../plugins/jqplot.categoryAxisRenderer.js" language="javascript" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="../plugins/jqplot.dateAxisRenderer.js" language="javascript" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="../plugins/jqplot.barRenderer.js" language="javascript" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="../plugins/jqplot.pointLabels.js" language="javascript" type="text/javascript" &gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>JQuery Initialization</strong></p>
  
  <pre><code>$(document).ready(function(){
      $.jqplot.config.enablePlugins = true;       
      line1 = [20, 0];
      plot2 = $.jqplot('chart2', [line1], { 
          seriesColors: ["#82BC24","#363636"],
          seriesDefaults: {
              renderer: $.jqplot.BarRenderer,
              rendererOptions:{barMargin: 25}, 
              yaxis:'y2axis',
              shadow: false
          },
          axes: {
              xaxis:{
                  ticks:[2010, 2040], 
                  renderer:$.jqplot.CategoryAxisRenderer, 
                  tickOptions:{markSize:0}
              },
              y2axis:{ticks:[0, 100], tickOptions:{formatString:'%d\%'}}
          }
      });
  });
  </code></pre>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;div id="chart2" class='plot' style="margin-top:20px; 
      margin-left:20px; width:200px; height:200px;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/WkI6A.png" alt="The Result I wanted"></p>