title: how to fix xaxis label on Flot js
body: <p>I'm using 'Categories' mode to display labels. It works fine with small number of datas on graph but when I have more than 100 of datas there is no way to see the labels. Is there any solution for flot js ?</p>
  
  <p><img src="https://i.stack.imgur.com/LUxOW.png" alt="enter image description here"></p>
  
  <p>Graph with more datas will be like :</p>
  
  <p><img src="https://i.stack.imgur.com/6AuJT.png" alt="enter image description here"></p>
  
  <p>Below is the options I'm using to display the graph :</p>
  
  <pre><code>var stackOptionSeries = { stack: true, bars:  { show: true,  barWidth: 0.4, align: 'center',lineWidth: 1.5, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.8 } ] }  } };
  
      var options = {
      grid:{ hoverable: true,
             clickable: true,
             autoHighlight:true,
             backgroundColor: 'white',
             borderWidth:1,
             borderColor:"rgba(0,0,0,0.1)",
             tickColor:'#FAFAFA'},
      series: stackOptionSeries,
      legend: {
        show: true,
        position: "ne",
        noColumns: 1
      },
      xaxis: {
        mode: "categories",
        tickLength: 0,
        panRange: [-0.2, maxXaxisRange+0.2]
      },
      yaxes:  [{ min: 0,ticks:7, panRange: [0,null], zoomRange: false }, {
        position: "right",
        autoscaleMargin: 1,
        ticks:4,
        min: 0,
        max: 100,
        panRange: [0,null],
        zoomRange: false
      }],
      pan: {
          interactive: true,
          frameRate: 80
      },
      tooltip: true,
      tooltipOpts: {
        content: "%y %s, %x", // show percentages, rounding to 2 decimal places
        shifts: {
          x: 10,
          y: 10
        },
        defaultTheme: false
      } 
    };
  </code></pre>