Rotating Labels

To rotate any text in axis, use one of the below functions and set angle in tickOptions. You must add canvasAxisTickRenderer plugin before changing the angle value in its tickOptions property to rotate text.

Many useful properties in canvasAxisTickRenderer plugin are available for text formatting such as prefix, labelPosition, and textColor.

The full documentation is available on jqPlot site here: http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisTickRenderer-js.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$pc = new C_PhpChartX(array($line1),'plot1');
$pc->add_plugins(array('canvasTextRenderer','canvasAxisTickRenderer','dateAxisRenderer'),true);
$pc->set_title(array('text'=>'Rotated Axis Text'));
$pc->set_axes(array(
        'xaxis'=>array(
            'renderer'=>'plugin::DateAxisRenderer',
            'min'=>'August 30, 2008',
            'tickInterval'=>'1 month',
            'rendererOptions'=>array('tickRenderer'=>'plugin::CanvasAxisTickRenderer'),
            'tickOptions'=>array(
                'formatString'=>'%b %#d, %Y',
                'fontSize'=>'10pt',
                'fontFamily'=>'Tahoma',
                'angle'=>-40,
                'fontWeight'=>'normal',
                'fontStretch'=>1)
        )
   
));
$pc->add_series(array('lineWidth'=>4,'markerOptions'=>array('style'=>'square')));
$pc->draw(600,400);

Live demo

No related content found.

Tags:

Top