Question

I have a question about ticks in x-axis. I work with jqPlot 0.9.7

My ticks are multiline, like this: a <br> b <br> c <br> d.
I use renderer: $.jqplot.CategoryAxisRenderer and it works well, so
the ticks show in multiline and
works.

Now I need to rotate them 30º. I tried ‘angle: -30’ but it doesn’t
work.

With this config:

xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        ticks: ['a <br> b <br> c <br> d' , 'p <br> q <br> r <br> s'],
        tickOptions:{
                angle: -30,
                fontSize: '9px'
        }

}

The ticks are shown in one single, rotated, long line. Neither <br> nor \n
are being interpreted as I need. This is the best approach I have found.

Is there any solution for this? How could I write rotated text ticks?

Any suggestion would be very helpful for me.
Thanks in advance. Best regards

Answer 1

For the correct syntax to work you need to include the following scripts along with the defaults jqPlots scripts.

• jqplot.canvasTextRenderer.min.js
• jqplot.dateAxisRenderer.min.js
• jqplot.canvasAxisTickRenderer.min.js

(The above files comes with the jqPlot package).

Then add the following to the plot options list

axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},

Then your

    tickOptions: {
        angle: -30,
    }

will be effective.

e.g.

....
    series: [{renderer: $.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            angle: -90,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {    
            tickOptions: {
                angle: 0,
                fontSize: '10pt'
            }
        }
    },
....

Example from jqPlot can be found here:
http://www.jqplot.com/tests/rotated-tick-labels.php