Search code examples
javascriptjquerycssflot

Flot - How to make xaxis label not overlap each other

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.

enter image description here

I make simple jsfiddle code, here is the link : http://jsfiddle.net/t3Vqh/240/

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}
              }
          };

I already search it and can't find the answer about this one.

Solution

  • Try this and then you can display complete name on hover in a tool-tip.

    .tickLabel {
    text-overflow: ellipsis;
    width: 10%;
    overflow: hidden;
    white-space: nowrap;
}