Search code examples
javascriptjquerychartsflot

Organizing stick axis labels on Flot chart

I'm using a Flot chart and when I have many labels in the xaxis so the information is truncated. enter image description here

I need to change the labels angle to show the information correctly, like this: enter image description here

How can I do this? I read something about labelAngle: 45 property for xaxis, but that does not work. When I use this property nothing changes in the graph.

xaxis: {
        show: true,
        mode: "time", 
        ticks: xaxisLabel,
        //timeformat:"%d/%m/%y %H:%M",
        timeformat: ( ($('#periodo').val() == "0") || ($('#periodo').val() == "1"))?"%H:%M":"%d/%m/%y",
        timezone: "browser",
        tickSize: [4, 'hour']
      }
Solution

  • Flot does not support rotated labels by default. You need to define some custom CSS (like in this answer) or use a plugin, for example tickrotor (which uses the xaxis.rotateTicks property instead of labelAngle).