title: Flot - How to make xaxis label not overlap each other
body: <p>I have a problem with flot chart, if i have long text in xaxis, it will be overlap each other, so the text information is not good and unreadable. Note: the xaxis label should not be rotated, it should be same angle. Only can be put it below or above the other text.</p>
  
  <p><a href="https://i.stack.imgur.com/8TvNj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8TvNj.png" alt="enter image description here"></a></p>
  
  <p>I make simple jsfiddle code, here is the link : <a href="http://jsfiddle.net/t3Vqh/240/" rel="nofollow noreferrer">http://jsfiddle.net/t3Vqh/240/</a></p>
  
  <pre><code>options = {
                series: {
                    bars: {
                        show: true
                    }
                },
                bars: {
                    align: "center",
                    barWidth: 0.5,
                    fill: 1,
                    fillColor: null
                },
                xaxis: {
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Open Sans',
                    axisLabelPadding: 10,
                    ticks: [
                  [1, "Testing a long text overlapTesting a long text overlap"],
                  [2, "Testing a long text overlapTesting a long text overlap"],
                  [3, "Testing a long text overlap"]
              ],
                    min: -0.5,
                    max: 4.5
                },
                yaxis: {
                    axisLabelUseCanvas: false,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Open Sans',
                    axisLabelPadding: 3,
                    tickColor: "#ffffff",
                    font: { color : "#fff" }
                },
                legend: {
                    noColumns: 0,
                    labelBoxBorderColor: "#000000",
                    position: "nw"
                },
                grid: {
                    borderWidth: 2,        
                    backgroundColor: "#000000",
                    margin: {"top" : 30}
                }
            };
  </code></pre>
  
  <p>I already search it and can't find the answer about this one.</p>